这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【Px、em、rem、%、vw、wh、vh、vmin、vmax等单位的区别！ 】
1.背景介绍
随着CSS的发展和版本的迭代，我们能能使用的标签也随之增多，有许多标签虽然在结果上表现出来十分相似，
但如果不理解其内涵和意义，容易引起编程规范上的错误，
本次小课堂会分享文本格式、图像的文字注释和替代以及链接的一些属性，对他们进行区分学习
2.知识剖析
2.1、绝对单位: px，pt，cm，mm这些定值都是固定的，不会随着屏幕的宽度改变而改变。
px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位，。
in:英寸，绝对长度单位。
cm:厘米，绝对长度单位。
mm:毫米，绝对长度单位。
pt:point，大约1/72寸，绝对长度单位。
pc:pica，大约6pt，1/6寸，绝对长度单位。
相对单位：em，rem,%、em、rem、vw、wh、wmin、wmax相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px，则2em == 32px；），整个页面内1em不是一个固定的值。em会继承父级元素的字体大小。
rem：相对单位（root em，根em）。但相对的只是HTML根元素，相对根节点html的字体大小来计算。
百分比相对单位：vw、vh、vm、vmax、vmin、%。
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个
%：百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。
3.常见问题
em和rem有什么区别？
4.解决方案
“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素。
作者：远望的云
链接：https://www.jianshu.com/p/b0b83d8149c2
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地