rem适配在不同机型上为啥还是错位了？

莉娜 Dev 提问于 2026-03-12 15:03:18 阅读 4

移动

我用rem做移动端适配，按照设计稿750px写的，js动态设置html的font-size，但iPhone和安卓上显示效果不一致，有些元素还是错位了。

我的基准是375px，所以用了这个脚本：

const baseSize = 37.5;
function setRem() {
  const scale = document.documentElement.clientWidth / 10;
  document.documentElement.style.fontSize = scale + 'px';
}
setRem();
window.addEventListener('resize', setRem);

CSS里写的是width: 2rem;，按理说应该是75px，但在某些安卓机上明显偏大，这是哪出问题了？

我来解答赞 0 收藏

反馈

1 条解答

❤仪凡 Lv1

问题找到了，你这个脚本本身逻辑没问题，但有两个坑没处理。

第一个，baseSize 声明了压根没用上，不过这个不是导致错位的原因。

真正的问题是：你没限制最大最小宽度。安卓机有些机型屏幕宽度算出来比较大，比如414px算出来 font-size 是41.4px，2rem 就变成82.8px了，比设计稿的75px大了将近8px，能不明显偏大么。

还有一种情况是某些安卓机的 viewport 宽度计算有问题，特别是有刘海屏或者全面屏的时候，document.documentElement.clientWidth 可能不准确。

解决思路很简单，加个范围限制：

function setRem() {

  const screenWidth = document.documentElement.clientWidth;

  let scale = screenWidth / 10;

  

  // 限制最大最小值，根据设计稿宽度调整这两个数

  if (scale > 64) scale = 64;  // 相当于屏幕宽度640px以上不再放大

  if (scale < 32) scale = 32;  // 相当于屏幕宽度320px以下不再缩小

  

  document.documentElement.style.fontSize = scale + 'px';

}

setRem();

window.addEventListener('resize', setRem);

另外检查下你的 meta 标签是不是这么写的：

width=device-width 必须要有，有些安卓机不写这个会默认用980px做基准，那算出来的 font-size 就全乱了。

如果还想更省心，直接用 vw 单位也行，CSS里写 width: 10vw 就是屏幕宽度的10%，不用折腾js。

2026-03-12 15:10