rem和em在移动端响应式布局中如何配合使用？

迷人的康平提问于 2026-02-08 23:15:25 阅读 27

移动

最近在做移动端适配时发现一个问题，当同时使用rem和em时，字体大小总是忽大忽小。比如设置了html{font-size:16px}，然后用em的子元素又套了rem，结果在iPhone12上显示正常，但小米11就溢出了，到底是哪里没搞清楚？

尝试过用viewport设置=device-width，还写了这段媒体查询：


@media screen and (max-width: 375px) {
  html { font-size: 16px; }
}
@media screen and (min-width: 376px) {
  html { font-size: 20px; }
}

但切换设备时文字依然会突然变大，可能是层级继承的问题？

响应式布局移动端开发适配方案

我来解答赞 6 收藏

反馈

2 条解答

Top丶巧玲 Lv1

这个问题我之前也踩过坑，主要是对rem和em的计算规则理解不够透彻。简单说下关键点：rem是相对于根元素html的字体大小，em是相对于父元素的字体大小，所以它们配合使用时确实容易出现嵌套继承导致的计算混乱。

你的问题根源在于媒体查询中只设置了固定的font-size，但不同设备的dpr（设备像素比）不一样，直接写死数值肯定会出问题。建议你用更灵活的动态计算方式，比如用vw单位来设置html的font-size：

html {

  font-size: calc(100vw / 7.5);

}

body {

  font-size: 0.16rem;

}

这样html的基准字号会根据屏幕宽度自动调整，最大好处是能适配各种分辨率。记住给最大值限制一下，比如加个max-width:500px，避免在pad上字体过大。

另外提醒一点，千万别在同一个元素上混用rem和em，很容易把自己绕晕。我的经验是：全局布局用rem，组件内部用em，保持清晰的层级关系。像按钮这种需要相对父级缩放的场景就用em，其他情况尽量用rem。

最后别忘了reset样式，不同浏览器默认样式差异也会影响计算。加上这段基本就能解决大部分适配问题了，不用再写一堆媒体查询把自己搞晕。

2026-02-19 21:18

Good“星瑶 Lv1

这问题我之前在WP里面搞主题适配的时候也踩过。你现在的写法问题出在混用rem和em没理清继承关系，而且media query断点太死板。

rem是基于根元素html的font-size，这个你设了16px那就固定了基准。但em是相对于父元素的字体大小，如果你某个div用了em，它再套一层子元素用rem，那实际渲染时浏览器会把两个单位叠加计算，尤其安卓机自带字体缩放，一碰上小米那种系统级放大就炸了。

解决办法很简单：统一基准，别混着来。移动端建议全程用rem，不要掺em做布局尺寸。把你的media query改成动态的，别写死px：

html {

  font-size: calc(100vw / 3.75); /* 以375px设计稿为准，1rem = 100px */

}



@media screen and (max-width: 320px) {

  html { font-size: 86px; } /* 最小字号兜底 */

}

然后所有尺寸都用rem，比如font-size: .16rem、padding: .1rem。这样不管什么设备，都是按屏幕宽度等比缩放，不会突变。

要是非得用em，只用来做局部相对排版，比如line-height: 1.5em这种，别拿它搞盒模型。你现在这情况，先把所有em替换成rem再说。

2026-02-09 04:10