在移动端前端开发中，每个开发者几乎都曾被屏幕适配问题困扰。明明在设计稿上完美呈现的界面，放到不同品牌、不同尺寸的手机上，要么元素错位、要么字体大小失衡，甚至出现内容被截断的情况。传统的适配方案要么需要编写大量冗余的媒体查询代码，要么依赖复杂的框架配置，不仅增加了开发成本，还容易在后续维护中出现新的兼容问题。而今天要分享的 “rem 自适应布局” 方案whatsapp登录，仅需 2 行核心 JS 代码，就能轻松解决绝大多数移动端适配痛点，实现对所有手机屏幕的无缝适配。
要理解这个方案的核心逻辑，首先需要明确 “rem” 单位的本质。rem（Font Size of the Root Element）是 CSS 中的相对长度单位，它的大小始终相对于 HTML 根元素的字体大小（font-size）来计算。例如，若我们将 HTML 的 font-size 设置为 16px，那么 1rem 就等于 16px；若将 HTML 的 font-size 调整为 20px，1rem 则对应 20px。这一特性让 rem 成为实现自适应布局的理想工具 —— 只要我们能根据不同屏幕的宽度，动态调整根元素的 font-size，页面中所有使用 rem 单位的元素就会自动缩放，从而适配不同尺寸的屏幕。
那么，如何让根元素的 font-size 与屏幕宽度建立关联？这就需要借助 JS 来实现动态计算。首先，我们需要明确一个关键前提：移动端设计稿的尺寸通常以 750px（iPhone 6/7/8 的宽度，属于主流设计标准）为基准。基于这个基准，我们可以设定一个简单的换算规则：让 HTML 的 font-size 等于屏幕宽度的 1/10。比如，在 750px 宽的设计稿中，HTML 的 font-size 就是 75px（750px/10），此时 1rem=75px，开发者在编写 CSS 时，只需将设计稿上的像素值除以 75，就能得到对应的 rem 值。而当屏幕宽度发生变化时，比如在 375px 宽的手机上（iPhone SE 等），HTML 的 font-size 会自动计算为 37.5px（375px/10），页面中所有以 rem 为单位的元素会同步缩小到原来的一半，完美匹配屏幕尺寸。官网：http://WWW.HRBTDYY.CN/
这一逻辑的核心实现，就是下面这 2 行 JS 代码：
TypeScript取消自动换行复制
(function(doc, win) {
const docEl = doc.documentElement;
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
const recalc = function() {
const clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = clientWidth / 10 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
虽然从代码行数上看超过 2 行，但核心逻辑其实集中在 “获取屏幕宽度” 和 “设置根元素 font-size” 这两个关键步骤，我们可以将其简化理解为：通过监听屏幕旋转（orientationchange）和窗口大小变化（resize）事件，实时获取当前屏幕的可视宽度（clientWidth），并将根元素的 font-size 设置为屏幕宽度的 1/10。官网：http://WWW.XINSHIJIEHOTEL.CN/
接下来，我们逐行拆解这段代码的作用，让每个开发者都能理解其背后的逻辑。首先，代码采用了立即执行函数（IIFE）的形式，将 document 和 window 作为参数传入，避免全局变量污染。内部通过doc.documentElement获取到 HTML 根元素（docEl），这是后续设置 font-size 的关键节点。然后，通过判断 window 是否支持orientationchange事件（该事件在手机屏幕旋转时触发），确定需要监听的事件类型 —— 若支持则监听orientationchange，否则监听resize（窗口大小变化事件，适用于部分平板或电脑模拟移动端的场景）。官网：http://WWW.MUZHIHUA.CN/
随后定义的recalc函数，是整个适配方案的核心计算逻辑。它首先通过docEl.clientWidth获取当前屏幕的可视宽度（这里要注意，clientWidth 不包含滚动条、边框和外边距，能准确反映页面可用于布局的宽度）；若无法获取 clientWidth（极少数老旧设备的兼容情况），则直接返回，避免报错；最后，将根元素的 font-size 设置为 “clientWidth / 10 + 'px'”，这一步就是实现 rem 自适应的关键：通过将屏幕宽度除以 10，建立起 “屏幕宽度 - 根元素字体大小 - rem 单位” 的联动关系。
最后，代码判断浏览器是否支持addEventListener（排除极早期的 IE 浏览器），若支持则为 window 绑定 resizeEvt（屏幕旋转或窗口变化事件）和 document 绑定 “DOMContentLoaded” 事件（页面 DOM 加载完成时触发），并将recalc函数作为事件处理函数。这样一来，无论是页面初次加载，还是用户旋转屏幕、调整窗口大小，recalc函数都会被触发，实时更新根元素的 font-size，确保页面始终保持适配状态。
掌握了核心 JS 代码后，还需要了解在实际开发中的应用流程，才能让适配方案落地。第一步是设计稿与 rem 的换算：假设设计稿宽度为 750px，某元素在设计稿上的宽度为 150px、高度为 75px、字体大小为 30px。按照 “1rem = 设计稿宽度 / 10=75px” 的换算规则，我们只需将设计稿上的像素值除以 75，就能得到对应的 rem 值 —— 元素宽度为 2rem（150px/75）、高度为 1rem（75px/75）、字体大小为 0.4rem（30px/75）。在编写 CSS 时，直接使用这些 rem 值即可，无需再编写任何媒体查询代码。官网：http://WWW.WPTCPWM.CN/
为了提升开发效率，还可以借助工具实现 “px 自动转 rem”，避免手动计算的繁琐和误差。目前主流的解决方案是在项目中集成 PostCSS 插件（如 postcss-pxtorem）。以 Vue 项目为例，只需在 postcss.config.js 中配置插件参数：设置 rootValue 为 75（对应 750px 设计稿的 1/10）、propList 为
'*'
（表示所有 CSS 属性中的 px 都需要转换），之后在开发中直接使用设计稿上的 px 值编写 CSS，插件会在构建时自动将 px 转换为对应的 rem，极大降低了开发成本。
此外，还有两个关键注意事项需要规避，否则可能导致适配失效。第一个是 viewport meta 标签的配置：在 HTML 的 head 标签中，必须添加。这个标签的作用是告诉浏览器，页面的宽度等于设备屏幕宽度，初始缩放比例为 1，且禁止用户手动缩放 —— 若缺少这个标签，浏览器会以默认的桌面端宽度（如 980px）渲染页面，导致 JS 获取的 clientWidth 不准确，进而让 rem 布局失效。官网：http://WWW.ZHAOZHENGFU.CN/
第二个注意事项是屏幕宽度的边界处理。虽然绝大多数手机屏幕宽度在 320px（老旧机型）到 428px（iPhone 13 Pro Max）之间，但部分平板设备的宽度可能超过 750px，若仍按照 “clientWidth/10” 的规则设置 font-size，会导致元素过大，影响桌面端或平板端的体验。因此，我们可以对recalc函数进行优化，添加宽度限制逻辑：当屏幕宽度大于 750px 时，强制将根元素的 font-size 设置为 75px，确保页面在大屏幕上不会无限放大。优化后的recalc函数如下：
TypeScript取消自动换行复制
const recalc = function() {
const clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 当屏幕宽度超过750px时whatsapp网页版，固定font-size为75px
if (clientWidth > 750) {
docEl.style.fontSize = '75px';
} else {
docEl.style.fontSize = clientWidth / 10 + 'px';
}
};
这一优化能让方案同时兼容移动端和小屏幕桌面端，进一步扩大适配范围。
与其他移动端适配方案相比，“2 行 JS 实现 rem 自适应” 的优势十分明显。首先是开发效率高：无需编写大量媒体查询代码，也无需学习复杂的框架语法，只需引入核心 JS 代码，再按照设计稿进行简单换算（或借助工具自动转换），就能完成适配开发，大幅缩短开发周期。其次是兼容性强：rem 单位在 iOS 5.1+、Android 2.1 + 的系统中都能完美支持，覆盖了 99% 以上的移动端设备，无需担心老旧机型的兼容问题。最后是维护成本低：所有元素的尺寸都基于 rem 单位联动，后续若需调整适配规则，只需修改 JS 中的计算逻辑（如改变 “除以 10” 的比例），无需逐一修改 CSS 样式，极大降低了维护难度。官网：http://ZUOANENGLISH.COM.CN/
当然，这个方案也并非适用于所有场景。例如，在需要实现 “固定尺寸元素”（如底部导航栏高度固定为 50px，不随屏幕缩放）的场景中，直接使用 px 单位会更合适；而在复杂的响应式布局（如同时适配移动端、平板、桌面端）中，可能需要结合媒体查询或 vw/vh 单位进行补充。但对于绝大多数以移动端为核心的项目（如商城 App、工具类应用、活动页面等），“rem 自适应布局” 是性价比最高的适配方案。
总结来说，“2 行 JS 实现 rem 自适应布局” 的核心逻辑，是通过动态调整 HTML 根元素的 font-size，让 rem 单位与屏幕宽度建立联动关系，从而实现页面元素的自动缩放。这一方案不仅解决了传统适配方案的繁琐与兼容问题，还能通过工具集成进一步提升开发效率，是每个移动端前端开发者都应掌握的核心技能。无论是新手开发者快速上手移动端开发，还是资深开发者优化项目适配流程，这个方案都能带来显著的价值 —— 毕竟，用最少的代码解决最复杂的问题whatsapp网页版，才是前端开发的核心追求。