css单位介绍

当我们在编写网页或应用程序时，选择合适的单位来描述元素的尺寸是非常重要的。在CSS中，我们常常会使用像素(px)、相对像素(rpx)、字号单位(em)、根元素字号单位(rem)、百分比(%)和视口百分比(vh、vw)等单位来描述元素的大小。

像素(px)是最常见的单位，它直接表示屏幕上的物理像素，可以精确地指定元素的尺寸。相对像素(rpx)则是微信小程序专用的单位，它保证了在不同设备上元素的大小比例一致性，使得页面在各种屏幕尺寸下都能够呈现相似的效果。

字号单位(em)和根元素字号单位(rem)是用来相对于父元素或根元素的字体大小进行调整的。使用em单位可以方便地调整字体大小，并且可以根据父元素的字体大小进行适配。而rem则相对于根元素进行适配，更准确地控制页面的布局。

百分比(%)是相对于父元素的宽度、高度、字体大小等进行调整的单位。通过使用百分比单位，我们可以实现响应式设计，使得页面能够适应不同尺寸的设备。

另外，视口百分比(vh、vw)是相对于视口高度和视口宽度的百分比。通过使用视口百分比单位，我们可以根据屏幕大小进行布局，适应不同设备的显示效果。

这些单位都是用来表示网页中元素尺寸的单位，它们之间的区别如下：

1. 像素（px）：像素是屏幕上最小的物理显示单元。在 CSS 中，px 通常用来表示绝对长度值，如宽度、高度、边框宽度等。

2. 相对像素（rpx）：相对像素是微信小程序专用的单位，1rpx 等于屏幕宽度的 1/750。因此，在不同设备上，1rpx 对应的实际像素数是不同的，但是它可以保证在不同设备上显示的元素大小比例一致。

3. 字号单位（em）：在 CSS 中，em 用于表示相对于父元素字体大小的倍数。例如，如果父元素的字体大小为 16px，子元素设置了 font-size: 1.5em，则子元素的字体大小将会是 24px（1.5 x 16）。

4. 根元素字号单位（rem）：在 CSS 中，rem 用于表示相对于根元素（即 html 元素）字体大小的倍数。例如，如果根元素的字体大小为 16px，子元素设置了 font-size: 1.5rem，则子元素的字体大小将会是 24px（1.5 x 16）。

5. 百分比（%）：在 CSS 中，百分比通常用于表示相对于父元素的宽度、高度、字体大小等。例如，如果父元素的宽度为 200px，子元素设置了 width: 50%；则子元素的宽度将会是 100px（50% x 200px）。

6. 视口百分比（vh、vw）：在 CSS 中，vh 和 vw 分别表示视口高度和视口宽度的百分比。例如，如果视口高度为 800px，子元素设置了 height: 50vh，则子元素的高度将会是 400px（50% x 800px）。同理，vw 表示相对于视口宽度的百分比。

综上所述，这些单位都有自己的适用场景，具体使用哪种单位要根据实际情况而定。