重点：
- rem是根据html中的font-size属性值（也就是px像素单位）来决定页面响应式布局的。
提示：
-
假设html标签中的font-size：20px，由于rem是基于html中font-size的，所以1rem === 20px;
要是将font-size修改为100px，那么现在的 1rem === 100px； 以此类推你明白了吗？
-
默认情况下font-size属性值是16px，谷歌Chrome浏览器中font-size最小属性值是12px。
例子：
以font-size默认属性值为例
html{
font-size: 16px;
}
p{
font-size: 1rem;
}
分析：
由于rem是基于html中的font-size来决定数值大小的，在上面的代码中p标签下的font-size=1rem，那么1rem === 16px（如果不明白，请看上面的提示）；由此可见在浏览器的视口中p标签中每个的文字大小是16px（1rem===20px）;
要是html中的font-size: 20px，那么p标签中的每个的文字大小是20px（1rem===20px）
问题：
当我们在html中设置font-size: 100px的时候，我们的文本文字都变的好大？怎么回事？
解答：
首先在html中设置font-size: 100px像素的时候，只要视口（整个html）中的标签会受到font-size影响到元素那么都会变成100px；所以总体来说整个视口都会变得非常大。
解决：
把会受到font-size影响的元素全部重新使用rem来计算。
例如：
html{
font-size: 100px
}
p{
font-size: 0.016rem;
}
<p>
AsideVel blanditiis voluptas cum animi recusandae, illum molestias maxime hic rerum voluptatum. Debitis recusandae velit a molestiae explicabo quibusdam maiores, similique ipsa, laborum ut officiis odit cupiditate deleniti reiciendis sapiente.Laborum, inventore incidunt ducimus eos nostrum quod unde optio cum expedita tempore delectus aliquid dolor suscipit, qui corrupti, enim illum. Tenetur ut facere ullam enim? Magni ut quidem enim quo!Atque eaque amet possimus animi saepe veritatis voluptatum tempore delectus nam ipsa? Facilis est neque recusandae atque. Vitae laboriosam a reprehenderit totam, asperiores in maiores, dolor quae incidunt quos suscipit.Ab ullam temporibus atque ut, accusantiumrerum et corrupti eos excepturi molestias quia, alias ipsam. Ut
</p>
这个情况下就会把整个页面撑的很大，那么我们要怎样来给p标签设置合适的rem呢？
解决：
我们想把p标签的文字缩小点【以px角度来想**font-size:16px就差不多了，但是现在我们使用rem布局的方式，如果直接写font-size: 16rem（160px），肯定不行啊。那么我们换算一下。
默念：
{ 在上面我们的font-size默认是给的100px，rem是基于html中的font-size来给我们响应式布局的，那么现在1rem是等于100px，那么16rem是160px，给16rem肯定不合适，那么我想给个差不多16px像素的样子，该怎么办？}
16px / 100px = 0.16rem
（设想要给的像素） /（html中的font-size）等于 0.16rem，那么刚好，就给 font-size: 0.16rem吧，渲染出来也是16px刚刚好，哎呀我真机制~）
