几种响应式文字详解


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和Firefox下javascript的兼容写法小结
Dec 10 Javascript
js如何取消事件冒泡
Sep 23 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
关于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编程中八种常见的文件操作方式
2006/11/19 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python入门篇之列表和元组
2014/10/17 Python
解析Python中的异常处理
2015/04/28 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
linux面试题参考答案(9)
2016/01/29 面试题
交通法规咨询中心工作职责
2013/11/27 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技