几种响应式文字详解


Posted in Javascript onMay 19, 2017

讲真,其实我也不知道该如何为此篇开头,

因为响应式文字需不需要做其实我也没有深入探究过,

但在学习其他网站的过程中,我发现了一些比较新奇的做法,所以想试着梳理一下,

为何会出现这种有些奇怪,可能实则非常奇妙的解决方案。

如果理解有偏差的地方,还望大佬们不吝赐教。

简单来说,响应式是为了让网页在各种显示设备上都有不错的浏览体验,

无论是 @media 将元素换行,后台获取 userAgent 返回不同页面,利用 viewport 限定视图,还是利用根元素 html 属性来计算大小等,

他们都能实现各自编程特色的响应式布局,非要说谁是最优,恐怕还是得依需求而定。

接下来我们先大致罗列一下,这几种布局方法的如何施展的。

众所周知的 Bootstrap,它的栅栏布局即为媒体查询的代表,完全通过屏宽来判断元素是否换行和是否显示。

<style><br>.col-xs-2 {width: 50%}
@media (min-width: 768px) {
  .col-sm-3 {width: 33.333333%}
}
@media (min-width: 992px) {
  .col-md-4 {width: 25%}
}
@media (min-width: 1200px) {
  .col-lg-5 {width: 20%}
}
</style>
 <div class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></div>

非常方便操作和容易理解地将显示设备按宽度分成了四个区间,各区间内按栅栏占比给予宽度。

然而,随着移动互联网的迅猛突进,以及 WebApp 的使用,也由于手机的分辨率和尺寸被厂商们不断更新,

768px 以下的设计要求也相应拔高,人们开始对响应式的要求也有了些改变。

比如 iPhone4 上的文字大小还适合 iPhone6 吗,Retina 屏的 1px 问题,devicePixelRate 和屏幕缩放问题等等...

所以为了解决这些问题产生了非常丰富的解决方案,我们一个一个来。

首先,随着屏幕越大,字体大小也越来越大,好像是个不错的想法耶。

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
  html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
  html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
  html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
  html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
  html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
  html{font-size: 20px;}
}
body {
  margin: 0;
  font-size: 1.6rem;
}

实践情况告诉我们,在 iPhone6 plus 上这种字大的体验确实不赖。

不过好像并不是字越大就越好看,比如在 iPad 上,字大绝对不是一个好的视觉体验。

所以又有了另一种搞法,根元素的字体大小由宽度和 devicePixelRate 来计算求得,也比上面的方法更注重了 dpr 的考虑。

<style>
body {font-size: .12rem}
</style>
<script>
!function() {
  function e() {
    r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
  }
  var t = navigator.userAgent,
    n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
    i = document,
    a = i.documentElement,
    o = (n.devicePixelRatio, 375),
    d = 100,
    r = (i.head.querySelector('[name="viewport"]'), i.createElement("style"));
  r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
  a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

这里并没有直接在设置 font-size 的时候就乘以 0.12 的原因可能是,这样会比较容易算宽度吧,比如 3.75rem 便是一个屏宽咯。

当然不用百分比而用 rem 来定宽,也是有些好处的。

比如两栏式百分比布局的间隙也只能百分比咯(calc 另当别论)造成左右和上下间隙不相等,

元素纵横比直接用数值就能完成,因为现在的 rem 就像百分比那样非常自动了,

后来发现,它还有 PC 端缩放浏览器比例保持页面不变的功效。

除此之外,还有淘宝的搞法,lib-flexible.js。

!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));

它和上面的方法在 rem 方面是类似的,10rem 便是一个屏宽,但在文字方面不太一样,

淘宝网触屏版 并不想让字体越来越大,而始终为 12px 或 24px,

而结果来看,字小图大加留白好像反而有些精细的感觉,也解决了上面方法 PC 端字超大的问题。

另外,如果使用此类方法,那么 @media 划分屏宽节点就得靠 rem 了哟,比如淘宝用的 10rem。

最后,再讲一个比较奇葩但又很有效的响应式方法。

<meta name="viewport" content="width=750,user-scalable=no" />
 
<style>
html, body {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
</style>

有没有感觉到一股我不管我不听的倔强气息,这种方法意味着,不管设备怎样,我只当设备是 750px 视图大小的设备。

375px 就是半个屏幕,这对做应用场景 H5 的小伙伴可谓是福音,做雪碧图用 px 定位什么的才是最爽的,

但它也有着它的坏处,也就是设备的宽高比是不定的,比如 iPhone4 和 iPhone5 一样宽但高度短一截,所以最好再加上一个上下居中的解决办法。

这几种方法都各有特色,有各自方便的角度,所以依照需求和喜好,多研究下吧,我也期望能有人来 和我讨论,么么哒

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
关于Bootstrap按钮组件消除黄框的方法
May 19 #Javascript
vue.js动态数据绑定学习笔记
May 19 #Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 #Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 #Javascript
angularjs封装$http为factory的方法
May 18 #Javascript
bootstrap表单示例代码分享
May 18 #Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 #Javascript
You might like
解析php中的escape函数
2013/06/29 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
JSONP基础知识详解
2017/03/19 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python实现探测socket和web服务示例
2014/03/28 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
django如何通过类视图使用装饰器
2019/07/24 Python
django的ORM操作 增加和查询
2019/07/26 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Django多数据库联用实现方法解析
2020/11/12 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
儿媳婚宴答谢词
2014/01/14 职场文书
音乐器材管理制度
2014/01/31 职场文书
上班打牌检讨书
2014/02/07 职场文书
管理失职检讨书
2014/02/12 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
认错检讨书
2014/10/02 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python