浅谈rem布局

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战 !

em与rem

em与rem是相对单位

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小

绝对单位与相对单位:

绝对单位与长度的物理单位有关。绝对长度单位近似于屏幕上的实际测量值，但是根据屏幕的分辨率会有一些差异，例如:px(像素单位)、in(英寸)、mm(毫米)

相对单位，相对于另一个长度值。例如:em(基于元素字体的大小)、rem(基于根元素字体的大小)。

rem原理：

等比缩放

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

rem应用场景:

当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小

rem布局的优点和缺点:

优点：

1. rem 与屏幕分辨率关联实现了页面的整体缩放，更好的适配设备展示效果
2. 基于现在浏览器基本都已经支持 rem 了，所以兼容性很好

缺点：

1. 使用 iframe 引用会出现问题
2. 一些dpr 设备表现不太好

rem+vw、vh

想让页面元素随着页面宽度变化，需要一个新的单位x，x等于屏幕宽度的百分之一，css3带来了rem的同时，也带来了vw和vh

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

聪明的你也许一经发现，这不就是单位x吗，没错根据定义可以发现1vw=1x，有了vw我们完全可以绕过rem这个中介了，下面两种方案是等价的，可以看到vw比rem更简单，毕竟rem是为了实现vw么

/* 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}

动态计算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)