CSS 单位说说｜美团前端面经解析

60 秒回答模板

CSS 单位可以按参照对象分类：px 是最常用的绝对显示单位；em 相对当前元素字体大小，rem 相对根元素字体大小；% 的参照取决于属性和包含块；vw、vh、vmin、vmax 相对视口；dvh、svh、lvh 解决移动端动态视口问题；fr 用在 Grid 中分配剩余空间。选择单位时要看目标是固定像素、跟随字体缩放、跟随父容器、跟随视口还是参与网格剩余空间分配。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

绝对和设备像素

px 在 CSS 中是逻辑像素，不等同于物理像素。高 DPR 屏幕上 1px CSS 可能对应多个物理像素，但布局仍按 CSS px 计算。

em 和 rem

em 在 font-size 上相对父元素字体，在其他属性上通常相对当前元素计算后的字体大小；rem 始终相对根元素字体大小，更适合全局字号和间距体系。

百分比单位

% 不是统一相对父元素所有属性。width 通常相对包含块宽度，height 百分比要求祖先高度可确定，padding 和 margin 的百分比通常参考包含块宽度。

视口单位

vw、vh 适合全屏布局和视口比例尺寸，但移动端地址栏展开收起会影响传统 vh。现代浏览器提供 dvh、svh、lvh 区分动态、小和大视口高度。

布局专用单位

fr 是 Grid 中的弹性份额，代表扣除固定轨道和间隙后的剩余空间分配。它不是普通长度单位，不能脱离 grid-template-columns 等网格场景使用。

响应式选择

字体和可访问性相关尺寸优先考虑 rem；组件内部间距可用 rem 或 em；容器内比例用 %；全屏场景用视口单位；复杂响应式可以结合 min、max、clamp 和容器查询。

易错点

不要说 px 等于物理像素。CSS px 是布局单位，高 DPR 屏会映射到多个物理像素。
不要说所有百分比都相对父元素宽高。不同属性的参照规则不同。
不要忽略移动端 vh 问题。全屏布局要考虑动态视口和安全区域。
不要把 fr 当通用单位。它主要服务 CSS Grid 的轨道分配。

面试官追问

em 和 rem 的最大区别是什么？

em 受当前元素或父级字体影响，嵌套时容易叠加；rem 只受根字号影响，更稳定，适合全局设计尺度。

height: 100% 为什么有时不生效？

百分比高度需要父级有可解析的确定高度。如果祖先高度都是 auto，浏览器无法计算 100% 对应的实际值。

移动端 100vh 有什么坑？

传统 vh 可能包含或忽略浏览器地址栏变化，导致底部被遮挡或页面跳动。可考虑 dvh、svh、lvh 或结合安全区域处理。

什么时候用 clamp？

当尺寸需要在最小值和最大值之间随环境变化时使用，例如 clamp(16px, 2vw, 24px)。它适合响应式范围约束。