Css中常用单位px,rem,em,vw,vh区别解析
px
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的。
em
- 子元素字体大小的em是相对于父元素字体大小
- 该元素的width/height/padding/margin用em为单位的话是相对于该元素内的字体大小设置的 注：如果当前父元素的字体尺寸未设置，则相对于浏览器的默认字体（16px）设置的。 所以默认情况下，1em = 16px。
如何高效使用em呢
- body标签中声明font-size:62.5%。即相当于
1em = 16px * 62.5% = 10px - 之后就可以把
em当做px使用。当然此时，1em = 10px - 如果在父容器里说明了
font-size:20px,那么在子容器里的1em就等于20px。
rem
rem是CSS3中新增的一个相对单位。rem顾名思义"root em",其参考的是页面根元素html的字体大小(font-size)
html { font-size: 10px; }
.box {
width: 2rem; /* 20px */
height: 2rem; /* 20px */
}
vw 和 vh
vw,视窗宽度，1vw=视窗宽度的1%vh,视窗高度，1vh=视窗高度的1%- 如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。
vmin 和 vmax
- vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
- 浏览器 height = 1100px、width = 700px，那么1vmin = 7px，1vmax = 11px
- 浏览器 height = 800px、width = 1200px，那么1vmin = 8px，1vmax = 12px
- vmin= / 100
- vmax= / 100
rem和em总结分析
<style>
html{ font-size: 10px; }
body
{
font-size: 1.2rem; /* 1.2rem = 12px */
padding: 0.7rem; /* 0.7rem = 7px */
}
div
{
padding: 1em; /* 1em = 12px */
}
span
{
font-size:1rem; /* 1rem = 10px */
padding: 0.5em; /* 0.5em = 6px */
}
</style>
<html>
<body>
<div>
<span></span>
</div>
</body>
</html>
从我们上面写的代码块可以看出em 会层层继承父元素的字体大小，很容易造成字体和盒子大小的混乱。所以以后用rem不但不会造成尺寸混乱还可以适配各种移动设备，我强烈推荐使用rem。
