大家好，我是IT修真院上海分院3期的学员，一枚正直纯洁善良的web前端程序员
今天给大家分享一下，修真院官网css任务3的知识点——px、em、rem、%、vw、wh、vm等单位有什么区别？
1.背景介绍
在编写Web网页中，长度单位是非常常用的一个单位。通过设置长度单位对页面的内容进行调整，来达到符合要求或者说看上去舒服的排版效果。传统的单位有：px、%、em，而随着技术的发展，css3增加了一些新的单位rem、vh、vw、vm等，使我们的web页面能适应各种不同的终端显示，现在我们来去看下他们的意义和不同点。
2.知识剖析
2.1 px
px是Pixel的缩写，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。
2.2 em
相对长度单位。em是相对于当前对象内文本的字体尺寸而计算的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体(16px)尺寸。也就是1em=16px。
2.3 rem
rem和em很像，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，从而统一整个页面的长度。
需要注意的是，我们经常用的谷歌浏览器会强制页面的最小字体为12号，即使设置成 10px 最终都会显示成12px。既然html{font-size：62.5%}办不到，那换个思路，将html{font-size：625%}怎么样。
2.4 百分比%
百分比%就是相对于父元素尺寸来进行计算的，比如定义两个div元素,div1包含div2,设置父div1的width为100px,子div2的width为50%,则实际上计算的结果就是：子div2的宽度是100px*50% = 50px。
1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%。
2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。
2.5 vw
vw是视窗宽度单位。1vw等于可视区宽度的百分之一。如果浏览器的宽是 500px, 1vw求得的值为 5px 。
2.6 vh
vh是视窗高度单位。1vh等于可视区高度的百分之一。如果浏览器的高是 800px, 1vh 求得的值为 8px 。
2.7 vmax
vmax是相对于视窗的宽度或高度的百分之一，取决于哪个更大。在宽为500px高为800px分辨率的显示器下1vm=8px。
2.8 vmin
vmin是相对于视窗的宽度或高度的百分之一，取决于哪个更小。在宽为500px高为800px分辨率的显示器下1vm=5px。
3.常见问题
为什么给body的CSS样式设置font-size为62.5%？
4. 解决方案
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。为了简化font-size的换算，所以需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
5.编码实战
6.扩展思考
除了这些单位还有什么其他的单位？
ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pt：点（Point），绝对长度单位。大约1/72寸.
pc：派卡（Pica），绝对长度单位。大约6pt，1/6寸,相当于我国新四号铅字的尺寸。
in：英寸（Inch），绝对长度单位。
mm：毫米（Millimeter），绝对长度单位。
cm：厘米（Centimeter），绝对长度单位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
7.参考文献
参考1：彻底了解css中的长度单位
参考2：视窗单位 vs 百分比单位
参考3：搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax
PPT
px、em、rem、%、vw、wh、vm等单位有什么区别？