rem

https://www.jianshu.com/p/d9606faafbaf

1.定义：

rem是相对于根元素（html标签）的字体大小的单位。简单可理解为屏幕宽度的百分比。

2.原理：

动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。通过此方法，rem大小始终为width的n等分。类似于 百分比布局

3.如何动态计算rem 

function init () {

    // 获取屏幕宽度

    var width = document.documentElement.clientWidth

    // 设置根元素字体大小。此时为宽的10等分

    document.documentElement.style.fontSize = width / 10 + 'px'

}

    // 首次加载应用，设置一次

    init()

    // 监听手机旋转的事件的时机，重新设置

    window.addEventListener('orientationchange', init)

    // 监听手机窗口变化，重新设置

    window.addEventListener('resize', init)

　　理解：上面代码实现了，无论设备可视窗口如何变化，始终设置rem为width的1/10.即实现了百分比布局

4、tip：

　　1、以上代码需在dom之前写入（可放在head里面第一个script标签）

        2、移动端加上meta标签

<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

5.对于1像素会无法渲染问题

6.vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN

/* rem方案 */

html{fons-size:width/100} p{width:15.625rem}

/* vw方案 */ p{width:15.625vw}

vw还可以和rem方案结合，这样计算html字体大小就不需要用js了

html{fons-size:1vw}  /* 1vw = width / 100 */

p{width:15.625rem}

7.字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；