# rem
# 什么是rem
rem和em都是相对单位，CSS3引入rem。
TIP
em作为font-size的单位时，代表父元素的字体大小。em作为其他属性的单位时，代表自身字体大小。
使用em做弹性布局时，有两个缺点:
- 层层嵌套，导致计算复杂。
- 牵一发而动全身，一旦某个节点字体大小变化，后代元素都得重新计算。
TIP
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素时，相对于其初始字体大小。
# rem布局原理
rem布局的本质是什么？是等比缩放，一般是基于宽度。
使用sass来写rem布局。
颜海镜大佬的demo中用的是scss语法，sass语法是没有分号、大括号的。
# 比rem更好的布局方案 vw/vh
TIP
vw -- 视口宽度的1/100；vh -- 视口高度的1/100。
# rem/vw兼容性
rem ios@4.1+ android@2.1+
vw ios@6.1+ android@4.4+
# rem使用场景
内容型的网站不适合rem，比如百度知道、百度经验。偏app类、图标类、图片类，如淘宝、活动页面，比较适合rem。
但是有个问题是bootstrap4默认采用了rem布局 (opens new window)
# rem的问题
- 字体大小不能用rem。由于设置了根元素的字体和大小，会影响所有没有设置字体的元素，因为字体大小会被继承。所以我们可以再body元素上做修正
- 如果PC端浏览，页面过宽需要再次修正。