你认识CSS中这些单位吗？

像素（px）

width: 100px;

• 最常用的单位，表示屏幕上的一个像素。
• px在移动端是有适配问题的，由于不同设备具有不同的屏幕尺寸和像素密度，使用固定的像素单位可能会导致在不同设备上显示不一致或缩放不合理的问题，当然可以使用vw、vh、rem等类似单位进行适配。

百分比（%）

width: 50%;

• 相对于父元素的大小进行计算。
• 百分比配合**flex布局**，可以很好的实现响应式适配效果。

Ems（em）

font-size: 1.2em;

• 相对于当前元素的字体尺寸。对于字体大小，1em等于父元素的字体大小。

Rems（rem）

font-size: 1.5rem;

• 相对于根元素(html)的字体尺寸。对于字体大小，1rem等于根元素(html)的字体大小。
• postcss-pxtorem插件就是利用了这个特性做的移动端适配。

逻辑像素（vw、vh、vmin、vmax）

width: 50vw;
height: 75vh;

• 视窗宽度（vw）、视窗高度（vh）、视窗较小的尺寸（vmin）和视窗较大的尺寸（vmax）的百分比。
• postcss-preset-env 插件同样是利用该特性做的移动端适配。

厘米（cm）

width: 2cm;

• 以厘米为单位的长度。

毫米（mm）

border-width: 1mm;

• 以毫米为单位的长度。

英寸（in）

width: 3in;

• 以英寸为单位的长度。

磅（pt）

font-size: 12pt;

• 以磅为单位的长度。

派卡（pc）

margin: 2pc;

• 以派卡为单位的长度。

角度单位（deg、rad、grad）

transform: rotate(45deg);

• 用于旋转和倾斜等属性的角度单位。

时间单位（s、ms）

transition-duration: 0.5s;

• 用于过渡和动画效果的时间单位。