CSS尺寸单位 % px em rem vw/vh 详解

在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位有：vw、vh、vmin、vmax几种。绝对长度单位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

px

为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；它的大小是根据用户屏幕显示器的分辨率决定的（因此不同的设备显示相同的像素值也可能会有不同的结果）。

em

它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位，可以变动。em会继承父级元素字体的大小，如果当前文本的字体尺寸未被定义，则相对于浏览器的默认字体尺寸。一般浏览器字体大小默认为16px，1em = 16px,那么0.625em=10px。

rem

它是描述相对于当前根元素字体尺寸，除了描述对象与em不同其余都和em一样。相对长度单位，1rem = 16px （默认条件下）。如果要对网页根元素字体大小进行修改，需要在标签中加上style="font-size:value"属性。

%

百分比是相对于父元素的尺寸。

vw/vh

根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。