tgoop.com/cosine_front_end/2839
Create:
Last Update:
Last Update:
#优质博文 #前端 #CSS #响应式设计 #可访问性 #视口单位 #排版 #打印
很棒的关于 CSS 长度单位的大合集介绍。
Making Sense of CSS Length Units
AI 摘要：文章以开发者视角概览 CSS 长度单位，强调 px 在高密度屏幕上已是“虚拟像素”并非绝对单位；屏幕端应优先 rem 以尊重用户字号设置提升可访问性，应用端用视口单位（viewport）适配全屏，打印场景用物理单位；并细分 vh/vw/vi/vb 及 sv*/lv*/dv* 的差别与适用时机，同时给出 em、% 的陷阱与 ch/ex/cap 等小众单位的用途。
1. 基础与绝对单位
• px 已虚拟化：在高像素密度（retina）设备上代表逻辑像素而非物理像素，因此不再“绝对”。
• 打印用物理单位：cm/mm/q/in/pc/pt 设计为打印介质；不同打印机 DPI 差异巨大，屏幕端不宜使用。
• 打印建议：为确保一致输出，优先使用打印友好单位或相对单位以适配不同分辨率。
2. 相对单位
• %（百分比）：相对包含块（containing block）；当元素 absolute 定位时，包含块判定更复杂，易出错。
• em：相对父元素 font-size，组件嵌套会累积放大/缩小，需谨慎。
• rem：相对根元素 html 的 font-size，组件在不同容器中保持一致尺寸；浏览器默认 16px，可用 html{font-size:62.5%} 将 1rem ≈ 10px（便于心算，非必须）。
• 可访问性（accessibility）：以 rem 构建能尊重用户自定义字号；纯 px 布局可能忽略用户设置并导致可读性问题。
3. 视口单位（viewport）
• 基本单位：vh/vw（视口高/宽）、vmin/vmax（较小/较大维度），vi/vb 随书写方向（writing-mode）切换，横排时 vi≈vw、vb≈vh，竖排语言会反转。
• 尺寸变体：sv*（浏览器控件可见时的“小”视口）、lv*（控件隐藏时的“大”视口）、dv*（当前动态视口，随控件显隐变化）。未指明前缀的 v* 等同于 lv*。
• 实战提示：全屏布局用 dvh 更贴合当前高度；为避免移动端地址栏显隐导致跳动，可按需组合 svh/lvh/dvh。
4. “奇特”单位与适用场景
• ch（“0”的宽度）、ex（“x”的高度）、cap（大写字母高度，适合图标对齐文本）、ic（CJK“水”字宽度）、lh（父元素行高）、rlh（根元素行高）。
• 适配文字排版和细粒度对齐；因支持度差异，需评估兼容与降级策略。
5. 实践要点与推荐方案
• 打印：使用 mm 等物理单位获得精确尺寸，或配合相对单位确保跨设备一致性。
• 网页：以 rem 为主，选用 1rem=10px 的设定仅为心算便利；避免全用 px 影响可访问性。
• Web 应用：用 dvh/dvw 填充视口，结合 vi/vb 适配不同 writing-mode。
• 选型原则：优先考虑用户设置与设备独立性、布局稳定性与可维护性，再选最贴合场景的单位。
6. 常见陷阱
• 绝对定位元素用百分比时误判包含块，导致尺寸/位置异常。
• 盲目使用 px 使布局对用户字号调整不敏感，影响可读性与无障碍。
• 移动端 100vh 在地址栏显隐时引发布局跳动，应改用 dvh 或配合 svh/lvh。
author Oded Sharon
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2839