前端常用单位em/px/rem/vh/vm到底有什么区别？

一、单位分类

在css的单位中，可以把单位分为两类：长度单位，绝度单位，如下表：

本文分析的是前端开发中常用单位 em、px、rem、vh、vw、% 的详细对比，从原理、特点、适用场景及示例进行说明：

二、相同点

1. 用途：都用于定义元素的尺寸（如宽高、字体大小、边距等）。
2. 响应式支持：除 px 外，其他单位均可用于响应式设计，能根据环境动态调整。
3. 相对性：em、rem、vh、vw、% 均为相对单位，依赖某个基准值计算。

三、区别详解

1. px（像素）

• 原理：
  • 绝对单位，基于屏幕物理像素，与设备分辨率直接相关。
  • 特点：
    • 固定大小，不受父级或视口影响。
    • 高分辨率屏幕（如 Retina 屏）下可能显示过小。
    • 适用场景：
      • 边框（border: 1px）、阴影（box-shadow）等需精确控制的属性。
      • 小图标（width: 16px）或固定尺寸元素。
      • 示例：

        .button {
          padding: 8px 16px; /* 固定内边距 */
          border: 1px solid #ccc; /* 固定边框 */
        }
        

        ---

        2. em（相对父元素字体大小）

        • 原理：
          • 相对单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。
          • 若父元素 font-size: 16px，则 1em = 16px。
          • 特点：
            • 嵌套层级影响：多层嵌套时，子元素的 em 会逐级累乘父级 font-size。
            • 适合与父元素联动的场景。
            • 适用场景：
              • 段落内边距（padding: 1em）。
              • 按钮或图标组件（需与父字体大小同步调整）。
              • 示例：

                .parent {
                  font-size: 16px;
                }
                .child {
                  padding: 1em; /* 实际为 16px */
                  margin-left: 2em; /* 实际为 32px */
                }
                

                ---

                3. rem（相对根元素字体大小）

                • 原理：
                  • 相对单位，基于**根元素（）**的 font-size。
                  • 默认根元素 font-size: 16px，因此 1rem = 16px。
                  • 特点：
                    • 全局基准：不受嵌套层级影响，统一基于根元素。
                    • 适合响应式布局（通过修改根元素 font-size 调整全局比例）。
                    • 适用场景：
                      • 全局布局（如容器宽高 width: 20rem）。
                      • 响应式文字大小（结合媒体查询动态修改根元素字号）。
                      • 示例：

                        html {
                          font-size: 16px; /* 1rem = 16px */
                        }
                        .container {
                          width: 40rem; /* 实际为 640px */
                          padding: 2rem; /* 实际为 32px */
                        }
                        

                        ---

                        4. vh/vw（视窗高度/宽度百分比）

                        • 原理：
                          • 相对单位，基于**视口（Viewport）**的尺寸。
                          • 1vh = 视口高度的 1%，1vw = 视口宽度的 1%。
                          • 特点：
                            • 视口变化时自动适配，适合全屏布局。
                            • 移动端需注意浏览器导航栏可能影响实际视口高度。
                            • 适用场景：
                              • 全屏背景容器（height: 100vh）。
                              • 视口比例布局（如轮播图宽度 width: 50vw）。
                              • 示例：

                                .hero-section {
                                  height: 100vh; /* 占满整个视口高度 */
                                  width: 80vw;   /* 视口宽度的 80% */
                                }
                                

                                ---

                                5. %（百分比）

                                • 原理：
                                  • 相对单位，基于父元素对应属性的百分比。
                                  • 不同属性的基准不同（如 width: 50% 基于父宽度，padding-top: 50% 也基于父宽度）。
                                  • 特点：
                                    • 依赖父元素的明确尺寸定义，否则可能失效。
                                    • 适合流式布局和比例控制。
                                    • 适用场景：
                                      • 栅格系统（width: 33.33%）。
                                      • 图片容器宽高比例（如 padding-top: 56.25% 实现 16:9 比例）。
                                      • 示例：

                                        .parent {
                                          width: 600px;
                                        }
                                        .child {
                                          width: 50%; /* 实际为 300px */
                                          padding-top: 25%; /* 实际为 150px（基于父宽度） */
                                        }
                                        

                                        ---

                                        四、对比总结

                                        单位	基准	响应式适配性	典型场景	特点
                                        px	绝对像素	❌ 差	边框、固定尺寸元素	固定值，不随环境变化
                                        em	父元素字体大小	✅ 中	嵌套组件（如按钮）	嵌套层级影响计算结果
                                        rem	根元素字体大小	✅ 强	全局布局、响应式设计	全局统一基准
                                        vh	视窗高度	✅ 强	全屏容器	视口高度适配
                                        vw	视窗宽度	✅ 强	视口宽度适配（如轮播图）	视口宽度适配
                                        %	父元素对应属性	✅ 中	流式布局、宽高比例控制	依赖父元素明确尺寸

                                        ---

                                        五、使用建议

                                        1. 优先 rem：全局布局使用 rem，通过动态修改根元素 font-size 实现响应式。
                                        2. 视口适配用 vh/vw：全屏区块或视口比例布局时使用。
                                        3. 慎用 em：仅在需要与父元素联动的场景（如按钮内边距）。
                                        4. % 需父级明确尺寸：确保父元素有明确尺寸后再使用百分比。
                                        5. px 用于细节控制：边框、阴影等需要固定值的场景。

                                        示例综合应用：

                                        html {
                                          font-size: 16px; /* 1rem = 16px */
                                        }
                                        .responsive-box {
                                          width: 80vw;      /* 视口宽度的 80% */
                                          padding: 2rem;    /* 32px */
                                          margin: 1em;      /* 基于父元素字体大小（假设父元素字体为默认16px，则为16px） */
                                          border: 2px solid #000;
                                        }
                                        .fullscreen-section {
                                          height: 100vh;    /* 全屏高度 */
                                          background: #f0f0f0;
                                        }
                                        

                                        
                                        （图片来源网络，侵删）
                                        
                                        （图片来源网络，侵删）
                                        
                                        （图片来源网络，侵删）