移动端rem及em

1、rem是什么（多用于web App开发）

rem（font size of the root element）是指相对于根元素的字体大小的单位。

简单的说它就是一个相对单位。这不得不说起另一个em单位，em（font size of the element）是指相对于父元素的字体大小单位。

两者区别：它们之间其实很相似，只不过一个计算的规则是依赖根元素，一个是依赖父元素计算。

2、为什么web App要使用rem

当然web page也可以使用rem单位，不过出于兼容性的考虑在web app下使用更加能突显rem单位的价值和能力。

注意：我们现在在切页面布局的使用常用的单位是px，它是一个绝对单位。

3、rem使用

rem是相对于根元素进行适配的，网页中的根元素指的是HTML，那么我们通过设置HTML的字体大小就可以控制rem的大小。

4、em和px关系

em是指字体高度，浏览器默认1em=16px，所以0.75em=12px。我们经常在页面上看到根元素写的font-size:65%，此时em为16px*62.5=10em。这时显示在页面的字体大小是10px。这样12px=1.2em，10px=1em，即只需要将你的原来的px数值除以10，再加上em作为单位就行了。

em的特点：em是一个相对值，它会根据父级元素的大小而改变。但是如果嵌套多个元素，要计算它的大小就非常的麻烦了。这种情况下，就出现了rem。rem的区别在于它是相对于根基元素的，所以不会被它的父类影响到。

总结：之所以前端行业做移动端会普遍默认用rem或者em，是因为可以通过js控制根元素（或用@media）来达到适配各种分辨率的字体大小的效果。

5、vh、vw和%

vh——viewport Height，vw——viewport Width，即视窗。

处理宽度的时候，%单位更适合；处理高度的时候，vh单位更好。