移动端适配之对rem、vw的思考

目录

问：为什么手淘的移动端适配方案，1rem要设定为页面宽度px值的1/10？

问：那为什么一行代码搞定的事，flexible.js却有几百行？

---

问：为什么手淘的移动端适配方案，1rem要设定为页面宽度px值的1/10？

答：因为1rem首先要大于浏览器最小字体12px，手淘相对于375px页面的除数是10，网易对320px的页面的除数是6.4，换算过来，两者的rem值都大于12px，至于具体数值的选择，可以选择一个除得尽的数字，只要盖数字能满足1rem大于等于12px即可

各大浏览器的最小字体与默认字体(谷歌最小字体是12px)

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width
    if (width / dpr > 540) {
      width = 540 * dpr
    }
    var rem = width / 10
    docEl.style.fontSize = rem + 'px'
    flexible.rem = win.rem = rem
  }

相配套的less样式是这样的：

@rootSize:37.5rem;

div{
    width: (150/@rootSize);
    height: (200/@rootSize);
}

看样子还是很复杂，每个数值都是一个除法算式，不方便书写，那么如何简化

width=(150/@rootSize)这个形式，试着将其化简一些？

我们再观察一下flexible.js节选代码和less样式，调出相关语句，看看能否发现什么：

var width = docEl.getBoundingClientRect().width

var rem = width / 10

@rootSize:37.5rem;

width: (150/@rootSize);

拼起来看看

var rem =  docEl.getBoundingClientRect().width / 10

width: (150 / 37.5 rem);

如何去除讨厌的除法？

只需要把37.5rem变成1rem就可以了，此时就能得到我们想要的形式

width：150rem

37.5 = 375 / 10

这里的10就是flexible.js选择的除数

1 = 375 / 375

换成375，屏幕设备的宽度px值,此时

var rem =  docEl.getBoundingClientRect().width / 375

width: 150rem;

看起来，这种写法把px换成了rem，让形式变得很简单了，但要注意，1rem，也就是根字体的大小，至少要大于等于12px，上述例子中1rem=1px，显然是不可行的，浏览器会自动把rem设置为最小允许的字体大小12px，导致排版错误，所以这种写法是不可行的，也正因如此，无论是除10还是除100，还是乘以675%再除100，这些很麻烦的除法都是省略不掉的。