网页设计单位 px，em，rem，vm，vh，%

Posted 2022-06-23 yaokai729

px(pixels)

像素 (px) 是一种绝对单位，因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。

px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

(有一种特殊情况，修改屏幕分辨率，px也会随之改变)

em

em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。

em是Web开发中最常用的相对单位。

rem

rem与em非常相似，它总是等于默认基础字体大小的尺寸；是相对于根元素html的，继承的字体大小将不起作用。所以，只需要通过设置根元素字体的大小，就可以调节整个页面的比例。

vm vh

vm：view width的简写，是指可视窗口的宽度的1/100。

vh：view height的简写，是指可视窗口的高度的1/100。

百分比%

为子元素添加百分比后，子元素根据父元素的宽高取值，父元素宽高变化，子元素宽高也随之变化。