【CSS】 vh、rem 和 px 的区别

vh、rem 和 px 都是 CSS 中常见的长度单位，它们有以下区别：

1. px（像素）是一个绝对单位，表示屏幕上的实际像素点。它的大小不会根据设备或浏览器的设置进行调整，是一个固定值。

2. rem（根元素字体大小的倍数）是一个相对单位，相对于根元素（通常是 元素）的字体大小。它的值会根据根元素的字体大小进行相应的缩放。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。

3. vh（视窗高度的百分比）是一个相对单位，表示相对于视窗高度的百分比。1vh 等于视窗高度的 1%。它可以用来设置元素的尺寸或间距，使其相对于视窗高度进行调整。

区别总结：

• px 是绝对单位，固定值；
• rem 是相对单位，相对于根元素的字体大小；
• vh 是相对单位，相对于视窗高度。

使用时需要根据具体情况选择适合的单位来控制元素的尺寸和布局。一般来说，使用 rem 和 vh 可以更好地实现响应式设计，而 px 则更适合用于需要精确控制的情况。