移动端rem自适应关键在于JS动态设置html根字号：根据屏幕宽度等比调整font-size（如750px设计稿下为width/750×75），配合CSS全用rem单位及正确viewport声明。

移动端网页用 rem 实现字体大小自适应，关键不在“换单位”，而在于动态控制根元素的 font-size。rem 本身不自动响应屏幕，它只是按比例计算——1rem 永远等于当前 html 元素的字号。所以真正起作用的是 JS 实时根据屏幕宽度调整这个基准值，再配合 CSS 中统一使用 rem 表达尺寸。

核心原理：根字号决定一切

浏览器默认 html 的 font-size 是 16px，且不会随设备变化。如果你只把 CSS 里的 px 改成 rem，但没改 html 的字号，那所有 rem 值只是做了固定换算（比如 16px → 1rem），页面根本不会缩放。只有让 html 的 font-size 随屏幕宽度等比变化，文字、按钮、间距等才会同步缩放，保持设计稿上的视觉比例。

JS 动态设置根字号（必须执行）

以常见设计稿宽度 750px 为基准，设定一个换算关系，例如“1rem = 75px”（即 750 ÷ 10）。那么在任意屏幕宽度下，根字号应为：

• html.font-size = 当前屏幕宽度 ÷ 750 × 75
• 推荐用 document.documentElement.clientWidth 获取真实可视宽度，比 window.innerWidth 更稳定（避开滚动条干扰）
• 需在页面加载完成时立即执行一次，否则首屏会闪动；同时监听 resize 和 orientationchange（横竖屏切换）事件

示例代码（可直接放入 ）：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<script><br> function setRoot() {<br>   const width = document.documentElement.clientWidth;<br>   document.documentElement.style.fontSize = (width / 750) * 75 + 'px';<br> }<br> setRoot();<br> window.addEventListener('resize', setRoot);<br> window.addEventListener('orientationchange', setRoot);<br> </script>

CSS 中正确使用 rem

所有涉及尺寸的属性（font-size、width、padding、margin 等）都用 rem，换算方式简单直接：

• 设计稿上某文字是 28px → 在 750px 基准下，28 ÷ 75 ≈ 0.373rem
• 一个按钮宽 150px → 150 ÷ 75 = 2rem
• 建议用构建工具（如 PostCSS + px2rem 插件）自动转换，避免手算出错

必须配合的 viewport 设置

在 中确保有正确的 viewport 声明，否则 JS 计算的宽度可能失真：

注意：不能省略 width=device-width，否则某些安卓 WebView 或老 iOS 会强制按桌面模式渲染，导致 clientWidth 取值异常，rem 缩放失效。