几种响应式文字详解


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 相关文章推荐
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
关于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
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
python友情链接检查方法
2015/07/08 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
安全保卫工作竞聘材料
2014/08/25 职场文书
房屋租赁协议书
2014/10/18 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
芙蓉镇观后感
2015/06/10 职场文书
详解nginx进程锁的实现
2021/06/14 Servers