5个CSS常用的单位

5个CSS常用的单位

• 前言


• px


• em


• rem


• vw&vh


• vmin&vmax

前言

知识点来源于b站up CodingStartup 视频链接

px

是一个绝对单位，一个px是一个点的意思，1920*1080这个16：9的解像度，代表你的荧幕横向由1920个光点，直向由1080个光点组成，1px就是一个光点的大小。

当我们用px这个绝对单位设定字体大小以及行距时，通常在更改字体大小时要同时更改行距大小，否则会出现行距过小或过大的情况。

em

它是一个相对的单位，是基于目前这个容器的大小设定再根据em的值去乘出最终的大小

如下图，第一层div的字体大小是10px∗1.810px*1.810px∗1.8即18px，第二层是18px∗1.818px*1.818px∗1.8即是32.4px，第三层大约58px。

下图当设定字体大小为1em，行距设定为1.2em时，代表行距就是字体大小的1.2倍，此时我们改变容器字体大小的时候，段落的字体大小和行距都可以按比例缩放。

rem

即root em的意思，它与em差不多，唯一不同是它是基于root元素即html元素的大小设定去计算。

沿用上图三层嵌套的div例子，当我们把em改为rem时，它们就不会受容器本身的字体大小设定影响，全部都根据html的字体大小设定再去计算。

rem比起em更加容易计算，避免html元素在多层嵌套后难以预测它的实际大小。

vw&vh

50vh表示画面高度的一半，50vw表示画面宽度的一半

在设定100vw后发现画面出现横向卷轴，这是因为body预设有一些padding与margin，将它们都设定为0即可。

vmin&vmax

vmin代表荧幕较短的一边，vmax代表荧幕较长的一边。

当将图片宽度设定为100vmin，他就会以荧幕较短一边的总边长作为宽度。

若将vmin改成vmax，则表示以荧幕较长的一边作为图片宽度，所以由于超出画面的原因，当手机横向时就会有垂直卷轴，当直向时就会有水平卷轴。