CSS样式中长度单位含义解析：rpx、px、vw、vh、em、rem、pt

在 CSS 样式中，有几种常见的长度单位，包括 rpx 、 px 、 vw 和 vh 等，含义解析如下：

• 1 . rpx （响应像素）： 是微信小程序中的一种相对长度单位，可以根据屏幕宽度进行自适应缩放。 1rpx 约等于屏幕宽度的 1/750 ，因此在不同设备上显示的大小会自动进行缩放，适应不同的屏幕尺寸。通常用于布局和字体大小的设置。

• 2 . px （像素）： 是像素单位，表示屏幕上的一个像素点。在微信小程序中， 1px 在不同设备上的物理大小可能会有所不同，因此不具备响应性。通常用于边框、阴影等具有固定尺寸的元素。

• 3 . vw （视窗宽度的百分比）： 是相对长度单位，表示相对于视窗宽度的百分比。 1vw 等于视窗宽度的 1 %。通常用于响应式布局中，根据视窗宽度的变化调整元素大小。

• 4 . vh （视窗高度的百分比）： 是相对长度单位，表示相对于视窗高度的百分比。 1vh 等于视窗高度的 1 %。通常用于响应式布局中，根据视窗高度的变化调整元素大小。

• 5 . em （相对于父元素的字体大小）： em 是相对长度单位，表示相对于父元素的字体大小。例如， 1em 等于父元素的字体大小。通常用于设置字体大小。

• 6 . rem （相对于根元素的字体大小）： rem 是相对长度单位，表示相对于根元素（ html 元素）的字体大小。例如， 1rem 等于根元素的字体大小。与 em 不同， rem 的值不会继承父元素的字体大小。通常用于响应式布局中。

• 7 . pt （点）： pt 是长度单位，等于 1/72 英寸，常用于打印和排版领域。

• 8 . %（百分比）： 百分比是相对长度单位，表示相对于父元素的百分比。例如， 50 % 表示父元素的一半大小。

下面是整理的一个表格，方便大家查看：

单位	特点	用途
rpx	相对于屏幕宽度的响应式单位，自适应缩放	布局和字体大小
px	固定单位，不具备响应性	边框、阴影等固定尺寸元素
vw	相对于视窗宽度的百分比，响应式单位	响应式布局
vh	相对于视窗高度的百分比，响应式单位	响应式布局
em	相对于父元素的字体大小	字体大小
rem	相对于根元素的字体大小，不受父元素影响	响应式布局
pt	等于1/72英寸，用于打印和排版领域	打印样式
%	相对于父元素的百分比	布局和尺寸调整