前端Wiki/CSS/基础/文字与颜色

单位 px em rem vw

CSS 的长度单位分绝对与相对两类：

px：像素，绝对单位，精确稳定，适合边框、阴影等不需要缩放的细节。
em：相对当前元素自身的字号。用于 text-indent: 2em 时跟着字号走；但层层嵌套时 em 会复利放大，不好预估。
rem：相对根元素 html 的字号。全页面统一参照，做整体缩放只需改一条规则，是响应式字号的主力。
vw / vh：视口宽高的 1%。100vw 正好占满一屏宽，适合全屏横幅、弹窗。注意 100vw 在有滚动条时可能略超宽度产生横向滚动，可用 100% 或 overflow 修正。
%：相对父元素，宽度、padding、字号都会各自按不同参照计算，使用时留意对象。

实践建议：字号和间距用 rem、组件内部微调用 em、精确线条用 px、全屏尺寸用 vw/vh。

本节要点px 绝对、em 看自身、rem 看根元素、vw/vh 看视口；rem 是响应式字号首选；html { font-size } 改一处全局缩放。

CSS

<style>
  html { font-size: 16px; } /* rem 的基准 */
  h1 { font-size: 2rem; }         /* 32px */
  p  { font-size: 1rem;  }        /* 16px */
  .indent { text-indent: 2em; }   /* 缩进两个字 */
  .banner {
    height: 40vh;          /* 视口高的40% */
    background: #dfe9f3;
  }
  .badge { font-size: 0.75em; } /* 相对父级16px=12px */
</style>
<h1>大标题 2rem</h1>
<p class="indent">首行缩进 2em 的段落。</p>
<div class="banner">高度 40vh 的横幅</div>

🔗 相关词条HTML CSS 元素阴影组件

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读