要想了解rem这个单位的原理以及使用方法，先来了解下css所有的度量单位。很多同学不太清楚的是，在 CSS 中长度单位又分为绝对长度和相对长度。我们今天来学习一下这些单位，看看有什么区别。
px
px像素单位其实是和设备屏幕的分辨率是直接相关的。
在web开发中，像素现在仍然是典型（主流的）度量单位。当然，你可以在web开发的过程中采用其他的单位，但是往往这些单位在渲染时都被映射换算成像素。是我们最常使用的单位:
header{
width: 100px;
height: 100px;
border: 1px solid #fff;
}
em
em的含义最初是指基于当前字体大写字母”M”的尺寸。所以当改变font-size的大小时，这个长度单位将会发生变化。
现代所有的浏览器中，都会有这样的一个默认值，即1em = 16px，所以即使你忘记了设置font-size也不要紧。
对于em我们需要注意:
基于当前元素的(如果没设置就是继承其父元素的)font-size
<div style="font-size: 12px;">
<span style="font-size: 2em">em单位</span>
</div>
如上代码中，span标签中设置了font-size: 2em，因为其父标签设置了font-size: 12px，所以span标签的结果就是font-size: 24px。
rem
rem单位是相对于字体大小的html元素，也称为根元素。
1rem = 根元素(html 节点)字体大小的倍数。根元素（html）的 font-size:16px
html {
font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}
.sqaure {
width: 5rem; /* 50px */
height: 5rem; /* 50px */
}
中文版的 Chrome 不支持把font-size 设置到到 12px 以下，因此可以考虑给根元素设置 font-size: 125%。
rem与em的区别：
rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
em最多取到小数点的后三位
<style>
html{ font-size: 20px; }
body{
font-size: 1.4rem; /* 1rem = 28px */
padding: 0.7rem; /* 0.7rem = 14px */
}
div{
padding: 1em; /* 1em = 28px */
}
span{
font-size:1rem; /* 1rem = 20px */
padding: 0.9em; /* 1em = 18px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
在上面的代码中，我们将根元素（html）的字体大小font-size设为20px，
body的字体大小设为1rem，那么转换为像素就是28px（20 × 1.4），
接着我们又将div的padding设为1em，由于其基于父元素，所以转换为像素是28px ( 28 × 1），
然后我们又将span的字体大小设为1rem，也就是20px，由于其自身设置了字体大小，所以padding设为1em，转换为像素是20px(20 × 1），而不是乘以其父元素的字体大小28px(28 × 1）。
注意：当元素自身设置了字体大小，那么如果它的其他css属性也使用em单位，则会基于它自身的字体大小。（就像上面例子的span的padding一样）
基于上面这些原因，个人更倾向于使用rem，因为em使用不当的话，当出现多层继承时，会很容易混淆，比如：
<style>
html{ font-size: 20px; }
body{
font-size: 0.9em; /* 18px */
}
div{
font-size: 0.8em; /* 14.4px */
}
span{
font-size: 0.9em; /* 12.96px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
使用em时，如果其祖先元素都是用了em，那么就会像上面一样，body继
承其父元素html的字体大小，而div又继承其父元素body的字体大小
，而span又继承其父元素div的字体大小，
最终span的字体大小最终是12.96px（20 × 0.9 ×0.8 × 0.9）。
vw vh
vw viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh viewpoint height，视窗高度，1vh=视窗高度的1%
vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
做一个占满高度的或者接近占满高度的幻灯片，可以用一个非常简单的方法实现，只要用一行CSS：
.cover{
width: 100vw;
height: 100vh;
}
vmin、vmax
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
如果浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px。
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。当然了,最好根据实际应用来使用相应的字体单位
网友评论