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是相对于根元素。