px，em，rem，vw 有什么区别？使用场景？ ​

题干 ​

• px，em，rem，vw

题解 ​

px，em，rem，vw 是四种不同的 CSS 尺寸单位，它们有以下的区别：

• px 是像素的缩写，它是一个绝对长度单位，表示屏幕上的一个点。px 的大小不会随着屏幕分辨率或浏览器缩放而改变，因此它可以保持图形的清晰度和精确度。px 通常用于设置边框，图片，字体等元素的尺寸。
• em 是一个相对长度单位，它表示当前元素的字体大小。如果当前元素没有设置字体大小，那么它会继承父元素的字体大小。em 的大小会随着字体大小的变化而变化，因此它可以实现自适应的布局效果。em 通常用于设置文本相关的属性，如行高，间距等。
• rem 是 CSS3 新增的一个相对长度单位，它表示根元素（HTML）的字体大小。rem 的大小不会受到父元素字体大小的影响，因此它可以避免字体大小的复合效应。rem 通常用于设置全局的字体大小，或者与 em 搭配使用。
• vw 是 CSS3 新增的一个相对长度单位，它表示视口（viewport）的宽度的百分比。1 vw 等于视口宽度的 1%。vw 的大小会随着视口宽度的变化而变化，因此它可以实现响应式的布局效果。vw 通常用于设置元素的宽度或水平位置。

使用场景：

• px 适合用于那些需要精确控制尺寸和位置的元素，或者那些不需要自适应屏幕大小和分辨率的元素。
• em 适合用于那些需要根据父元素字体大小进行缩放的文本元素，或者那些需要保持一定比例关系的元素。
• rem 适合用于那些需要根据根元素字体大小进行缩放的文本元素，或者那些需要避免字体大小复合效应的元素。
• vw 适合用于那些需要根据视口宽度进行缩放的元素，或者那些需要实现响应式布局的元素。

贡献者 ​

isboyjc