1 rem与em
rem单位：指的是html元素的font-size的倍数。和em关注父元素不同，rem只关注根元素(html)
<html>---font-size: 20px; 这个就是基准字号
<body>---font-size: 2rem; 计算后是40px，不看父亲只看根<div>----font-size: 2rem; 计算后是40px，不看父亲只看根<p>----font-size: 2rem; 计算后是40px，不看父亲只看根<span>----font-size: 2rem; 计算后是40px，不看父亲只看根
em是相对于父元素的字号
2 rem布局
rem布局的本质是等比缩放，一般是基于视口宽度
rem布局原理：假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x=屏幕宽度/100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比p{width:50x}
如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生改变。
如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了
css提供了vw和vh，可以表示x单位：1vw=1xvw--视口宽度的1/100 vh--视口宽度的1/100
3 宽度标准化
根据效果图的宽度计算rem太烦琐了，如果1rem与1px恒等就好了。
工作中，移动端设计师通常为我们提供宽度为320px的设计图。
为了让1rem代表1px，我们常常将html根元素的字号定义为100/320vw即：html{font-size: 0.3125vw;}此时在标准设计图中，1rem=1px
实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}html {font-size: 0.3125vw;}.container {width: 310rem;margin: 0 auto;}.list {margin-right: -5rem;}.box {width: 100rem;height: 50rem;background-color: pink;margin-right: 5rem;margin-bottom: 5rem;float: left;}.big {height: 105rem;margin-bottom: 0;}</style>
</head>
<body><div class="container"><div class="list"><div class="box big">111</div><div class="box">222</div><div class="box">333</div><div class="box">444</div><div class="box">555</div></div></div>
</body>
</html>
