【温故而知新】px/em/rem/vh/vh/%的区别

概念

px - 像素（Pixel）是屏幕上图像的最小单位，用于衡量屏幕上的细节大小。

em - em 是相对于父元素的字体大小的单位。当一个元素设置字体大小时，em 单位表示当前元素继承的父元素的字体大小的倍数。

rem - rem（root em）是相对于根元素（即 元素）字体大小的单位。它的计算方式与 em 类似，不同之处在于 rem 的参考基准是根元素的字体大小，因此不会受到继承关系的影响。

vh - vh 是视窗高度（Viewport Height）的单位，1 个 vh 表示视窗高度的 1%。

vw - vw 是视窗宽度（Viewport Width）的单位，1 个 vw 表示视窗宽度的 1%。

% - 百分比单位可以用于多种属性，如宽度、高度、边距等。它是相对于父元素的相应属性的百分比值。

案例

1. px:
   • 区别：像素单位是绝对单位，表示屏幕上的物理像素。
   • 案例代码：

     .box {
       width: 200px;
       height: 150px;
       font-size: 16px;
     }
     

2. em:
   • 区别：em 单位是相对于父元素的字体大小的倍数。
   • 案例代码：

     .parent {
       font-size: 20px;
     }
     
     .child {
       font-size: 1.2em;  /* 相当于 20px * 1.2 = 24px */
     }
     

3. rem:
   • 区别：rem 单位是相对于根元素（即 元素）的字体大小的倍数。
   • 案例代码：

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

4. vh:
   • 区别：vh 是相对于视窗高度的百分比单位。
   • 案例代码：

     .box {
       height: 50vh;  /* 相当于视窗高度的 50% */
     }
     

5. vw:
   • 区别：vw 是相对于视窗宽度的百分比单位。
   • 案例代码：

     .box {
       width: 50vw;  /* 相当于视窗宽度的 50% */
     }
     

6. %:
   • 区别：百分比单位可以用于多种属性，相对于父元素的相应属性的百分比值。
   • 案例代码：

     .parent {
       width: 300px;
       height: 200px;
     }
     
     .child {
       width: 50%;  /* 相当于父元素宽度的 50% */
       height: 75%;  /* 相当于父元素高度的 75% */
     }
     

相关文章

【温故而知新】HTML回流和重绘
【温故而知新】Canvas详解及常见问题
【温故而知新】CSS预编语言
【温故而知新】CSS提高性能的方法都有那些
CSS的Grid布局与Flex布局

有疑问，请留言，或者进入社区一起谈论日常开发中，遇到的问题
扫码加入社区【猿区】