rem em px 区别：CSS单位怎么选

rem em px 区别，取决于它们以什么为基准。rem相对于根元素的字体大小，因此1rem在页面各处的含义都相同。em相对于元素自身的字体大小（用在font-size上时则相对于父元素），因此它会随组件变化。px是固定的CSS像素，不随用户的字体大小偏好变化。一个实用的默认选择是：字体大小和页面间距用rem，应随自身文字一起变大的元素（按钮内边距、图标大小）用em，边框和阴影用px，媒体查询中可用em或rem。

em与rem：各单位如何计算

三种单位的区别只在于参照点。MDN的长度参考是这样定义的（2026年10月查看）：

16px是常见的浏览器默认值，而不是常量。MDN指出，用户偏好可以改变它，这正是文字尽量使用相对单位的全部理由。

在组件中：

html { font-size: 100%; }      /* 浏览器默认值下为 16px */

.card { font-size: 1.25rem; }  /* 20px */
.card h2 { font-size: 1.5em; } /* 1.5 × 20px = 30px */
.card p  { font-size: 1.5rem; }/* 1.5 × 16px = 24px，与卡片无关 */
.card .tag { padding: 0.5em; } /* 标签自身字体大小的一半 */

这个em标题取决于它所在的位置。把它移到.card之外，它就变成24px。rem段落在任何地方都是24px。

em为什么会叠加

由于font-size上的em会乘以父元素的大小，嵌套的元素会再次叠加：

li { font-size: 0.875em; }

三层嵌套的列表最终会是0.875 × 0.875 × 0.875 ≈ 0.67倍基准大小：在16px根字体下约为10.7px。如果改用0.875rem，每一层都保持14px。这种叠加就是为什么字体大小更适合用rem，而em应用在需要随局部文字缩放的地方。

每个CSS属性应使用哪种单位

选择单位的依据是：这个尺寸应当跟随什么，是用户的文字偏好、组件自身的文字，还是什么都不跟随。以下是建议和设计选择，并非规范的要求：

当宽度应随屏幕而不是文字变化时，使用px布局宽度是可以的。1px的边框、固定44px的头像或1200px的页面容器，都不需要随字体大小增长，但这些盒子里的文字需要。

间距需要权衡。使用rem的间距会在用户放大文字时，让页面的节奏与文字同步。使用px的间距在大字号下能在小屏幕上放下更多内容。在360px宽的手机上，这种取舍会很快显现出来，因此值得测试（见最后一节）。

字体大小中的rem与px与无障碍

字体大小请使用rem（或%，或medium这类关键字），因为px字体大小会忽略用户在浏览器中选择的默认字体大小。在桌面版Chrome中，该设置位于“设置 > 外观 > 字体大小”，更多选项在“自定义字体”中（Chrome帮助）。如果用户把它从默认值调到20px，使用1rem的正文会变成20px，而使用16px的正文仍然是16px。

浏览器缩放的工作方式不同。缩放会缩放所有内容，包括px，因此按Ctrl和+时，px布局依然会放大。字体大小设置是rem与px行为不同的情况，也是低视力用户在不需要页面横向滚动的前提下放大文字时所依赖的设置。

WCAG 2.2成功准则1.4.4 调整文字大小（AA级）要求文字可以放大到200%，且不丢失内容或功能。其充分技术包括为字体大小使用em单位。相对单位让这项准则更容易满足，但不能保证满足，因为固定高度的盒子仍可能截断变大的文字。

手机与系统文字大小

在手机上，情况正在变化。Chrome 146（2026年3月10日稳定版）新增了一个可选的meta标签，让根字体大小跟随操作系统和浏览器的文字缩放设置（Chrome 146发行说明）：

<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">

加上该标签后，MDN的text-scale参考称，rem、em和字体大小关键字会随系统设置缩放，而px字体大小不会。截至2026年10月，MDN将该标签标记为实验性功能，支持范围有限，并警告移动端文字缩放范围可能从200%到300%以上，因此选择启用的页面需要在这些大小下测试。没有该标签时，Android上的Chrome在“设置 > 无障碍”中提供“默认缩放”滑块，它会缩放整个页面（Chrome帮助），因此在那里px和rem会一起放大。

这是目前使用rem字体大小最有力的理由：按rem设置尺寸的网站，只要添加一个meta标签，就能立即为系统文字缩放做好准备。

根字体大小与62.5%技巧

根字体大小保持不变，或者设为百分比。设置html { font-size: 16px; }会覆盖整个页面的用户偏好，因为此时每个rem都指向固定的16px。

众所周知的62.5%技巧是设置html { font-size: 62.5%; }，使默认情况下1rem等于10px，1.6rem等于16px。它保留了用户的缩放，因为百分比是基于用户的默认值应用的。其代价是，任何为16px的rem编写的第三方组件都会以62.5%的大小渲染，偏离原本的尺寸。如果你想要更简单的计算，可以用Sass函数或CSS自定义属性完成换算，而无需修改根元素。

px转rem换算表

在默认根字体大小下，rem = px / 16：

表单输入框的文字请保持在16px（1rem）或更大：如果文字更小，iOS Safari会在输入时放大页面。

媒体查询中的em、rem或px

在媒体查询条件中使用em或rem，因为这样断点会随用户的默认字体大小移动。在媒体查询中，两种单位的含义相同：Media Queries Level 4规范称，其中的相对单位基于初始字体大小，该大小由用户代理或用户偏好设定，而不是你样式表中的html规则。

/* 默认16px时为48em = 768px，默认20px时为960px */
@media (min-width: 48em) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

以竖屏平板为例，视口宽820px（820x1180在StatCounter 2026年9月的全球平板分辨率数据中占5.06%）。在默认设置下，双栏布局在768px时开启，因此这台平板会显示双栏。默认字体为20px的用户会一直看到单栏，直到960px，这是能容纳他们更大文字的布局。如果使用min-width: 768px，就会强制他们使用双栏，挤压文字。

如何首先选择断点值，见如何选择响应式断点，查询语法本身见CSS媒体查询指南。

在手机宽度下检查你的单位

要查看你的单位是否会响应用户的文字大小，请放大默认字体，然后在较小的手机宽度下查看页面：

1. 在桌面版Chrome中，打开“设置 > 外观 > 字体大小”并选择更大的尺寸，或在“自定义字体”中设置确切大小。
2. 在360px宽的手机视口中打开页面。Mobile View Extension会以带移动端用户代理和屏幕尺寸的手机身份重新加载标签页；可选择预设，或输入360 × 800作为自定义分辨率。DevTools设备模式同样可用。
3. 检查正文是否变大了。如果没有，说明有东西设置了px字体大小或px根大小。
4. 查找溢出按钮的文字、固定高度盒子中被截断的标签，以及折成两行的导航。
5. 把设置恢复为默认值，并将两种状态并排比较。

这只测试了桌面版字体大小设置。预览在桌面版Chrome中用鼠标运行，因此无法复现手机的系统文字大小、Safari的渲染，或Android上的text-scale meta标签。这些需要用真机或模拟器，并在那里提高系统字体大小来检查。

关于如何用这些单位构建流式布局，见什么是响应式网页设计。

常见问题

字体大小应该用rem还是px？

字体大小用rem。px字体大小会忽略用户在浏览器中选择的默认文字大小，而rem会跟随它；并且rem字体大小也正是Chrome的text-scale meta标签在手机上缩放的对象。

什么时候用em而不是rem？

当尺寸应跟随元素自身的文字时用em：按钮和徽章的内边距、文字内的图标、字间距，以及媒体查询条件。嵌套的font-size值应避免使用em，因为它会叠加。

1rem总是16px吗？

不是。1rem等于根元素的字体大小，只有在常见的浏览器默认值下才是16px。用户设置、html上的百分比，或text-scale meta标签都可能改变它。

em和rem在媒体查询中的表现不同吗？

不。在媒体查询中，两者都基于浏览器和用户设置的初始字体大小，因此48em和48rem给出相同的断点。你样式表中设置在html上的字体大小不会影响它们。