VW: 是时候放弃REM布局了

首先我们先介绍一下rem

em是css中的一个计量单位,就好比猴子是上单的一个计量单位一样 即 em: em-quads。
那么,rem的意思就不难猜了,r代表的是 root 即 rem:root em => root em-quads。
我们都知道,em是个单位它参照的是父元素的字体,那么rem的大小就是以根元素的字体作为参照。
所以,我们在用rem的时候就必须知道根元素是什么,它的字体大小是多少,还有如何设置根元素的字体,已达到我们根据设备尺寸的不同实现用rem作为计量单位完成我们所讲的移动端的适配的。
而关于rem的适配方案各家的方法也不是很统一,只能说是各有千秋,而比较流行的就是手机淘宝的适配方案了,也就是我们总在讲的lib-flexible的适配方案。关于rem的布局方案我推荐一篇文章会详细讲到lib-flexible布局方案《使用Flexible实现手淘H5页面的终端适配》

在使用rem布局中到底会有哪些问题

  • 在奇葩的dpr设备上表现效果不太好,比如 一些华为的高端机型 用rem布局会出现错乱。
  • 设置根字体大小的方式有两种,一种是媒体查询,优点:不需要额外使用js去更改html的字体,缺点:不连续,或者说并能完全实现对所有设备的布局规范统一;
    另一种是js动态更改html字体,优点:连续;缺点:不如直接写媒体查询的体验好;
  • 不支持css3 calc的需要大量密集的 @media hack;
  • 使用iframe引用也会出现问题;
  • 需要解决在ios上的1px边框问题,但是这个在lib-flexible中已经解决:(1px变2px, 又被 initial-scale=0.5 缩小了一半);

关于viewport,即,视窗

总结

之所以会写这篇文章,就是希望大家在使用上述某一种适配方案的时候,要大概了解其机制,兼容性,以及可能遇到的问题,做到心中有数。
以上。

推荐阅读更多精彩内容