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

志选 Dev 提问于 2026-03-22 23:25:20 阅读 4

移动

我用rem做移动端适配，按照设计稿750px来设置根字体大小，但真机测试时发现iPhone和安卓显示效果不一致，有些元素明显偏移了。

我在html里动态设置了font-size，代码是这样的：

function setRootFontSize() {
  const designWidth = 750;
  const rootFontSize = (document.documentElement.clientWidth / designWidth) * 100;
  document.documentElement.style.fontSize = rootFontSize + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);

页面里一个按钮宽高都设成2rem，按理说应该正好是200px（基于750设计稿），但在某些安卓机上看起来比预期小，iOS又正常。是不是哪里漏了？viewport设置也加了啊：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我来解答赞 2 收藏

反馈

1 条解答

洋洋 Lv1

rem适配问题确实挺头疼的。你已经做了基本的适配设置，但还有几个地方可以检查和优化。

首先，确保你的 viewport 设置没有问题，你已经加了 initial-scale=1.0, maximum-scale=1.0, user-scalable=no，这一步是对的。

其次，可能是由于浏览器默认的缩放行为或者用户手动缩放导致的。你可以尝试在设置根字体大小的时候，加上一个最小值限制，防止被缩放影响：

function setRootFontSize() {

  const designWidth = 750;

  let rootFontSize = (document.documentElement.clientWidth / designWidth) * 100;

  // 添加一个最小值限制

  rootFontSize = Math.max(rootFontSize, 16); // 这里的16可以根据实际情况调整

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

}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

再者，有时候安卓机之间的差异很大，可以尝试在计算根字体大小的时候，缓存结果，避免频繁计算，提高性能，也可能间接解决一些显示问题：

let cachedWidth = 0;



function setRootFontSize() {

  const designWidth = 750;

  const currentWidth = document.documentElement.clientWidth;

  

  if (cachedWidth === currentWidth) return; // 如果宽度没变，直接返回

  cachedWidth = currentWidth;

  

  let rootFontSize = (currentWidth / designWidth) * 100;

  rootFontSize = Math.max(rootFontSize, 16); // 添加一个最小值限制

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

}



setRootFontSize();

window.addEventListener('resize', setRootFontSize);

最后，检查一下你的 CSS 文件，确保没有其他样式覆盖了 rem 单位的设置，有时候是样式冲突导致的显示问题。

这些步骤应该能帮你解决大部分 rem 适配问题，如果还是有问题，可能需要针对具体机型进行调试了，真是有点烦人。

2026-03-23 00:06