CSS 中px、em、rem、%、vw、vh单位之间的区别详解

下面是详细讲解“CSS 中px、em、rem、%、vw、vh单位之间的区别详解”：

基本介绍

在 CSS 中，有很多种单位，其中比较常见的有 px、em、rem、%、vw、vh 等。每种单位都有其独特的特点与用法，下面进行详细介绍。

px

px 即“像素”，是绝对单位，表示网页中的绝对长度。px 单位的大小不会因为屏幕分辨率的差异而产生变化。通常在固定尺寸的设计中比较常用。

示例：

.box{
    width: 200px;
    height: 100px;
}

em

em 是相对单位，是相对于其父元素的字体大小进行计算。如果元素自身没有设置字体大小，则默认继承自父元素的字体大小。em 单位的大小会随着其父元素字体大小的改变而改变，因此在响应式布局中比较常用。

示例：

.parent {
    font-size: 16px;
}
.child {
    font-size: 1.5em; /* 相当于 24px */
}

rem

rem 也是相对单位，但是相对于根元素 html 的字体大小进行计算。即使页面中存在多个嵌套层级的元素，其大小也只取决于 html 的字体大小。因此，在响应式布局中，rem 也比较常用。

示例：

html {
    font-size: 16px;
}
.box {
    font-size: 1.5rem; /* 相当于 24px */
}

%

% 单位是相对单位，通常用于指定元素的大小相对于其父元素。常常用于响应式布局中的宽度百分比等。

示例：

.parent {
    width: 400px;
}
.child {
    width: 50%; /* 相当于 200px */
}

vw, vh

vw 和 vh 是视口单位，分别表示视口的宽度和高度的百分比，其值的计算是相对于整个视口的宽与高来说的。在设计响应式布局时，vw 和 vh 十分实用。

示例：

.box {
    width: 50vw; /* 相当于视口宽度的一半 */
    height: 50vh; /* 相当于视口高度的一半 */
}

总之，在选择单位时，需要根据不同的需求来决定，如果是固定宽度的元素，可以使用 px；如果是相对大小，需要根据父元素字体大小变化而变化时，可以使用 em 或 rem；如果是相对于父元素宽度变化而变化，则可以使用 %；如果是相对于视口大小变化而变化，则可以使用 vw 或 vh 等视口单位。