前端 rem 自适应适配方案详解
引言
在移动端开发中，rem 自适应是解决多设备屏幕适配的核心方案之一。然而，许多开发者仅凭经验设置根字体，导致在不同机型、横竖屏切换或系统字体调整时出现 UI 走样、布局错乱等问题。本文将深入解析 rem 原理，提供一套经过验证的动态适配方案，并探讨常见坑点及调试技巧。
rem 单位原理
rem 与 em 的区别
em 是相对父元素字体大小，多层嵌套计算复杂；rem (root em) 则基于根元素 (html) 的 font-size，计算更直接。理论上 1rem = 16px，但实际开发中根字体大小通常通过 JS 动态修改。
影响 rem 渲染的关键因素
浏览器渲染 rem 受 viewport 宽度、dpr (设备像素比) 及用户系统字体设置影响。例如，部分安卓机允许用户调整系统字体，若未做兼容，rem 布局可能溢出或变形。
核心适配逻辑
设计稿基准确认
需明确设计稿基准宽度（如 375px 或 750px）。
- 若设计稿为 375px，除以 10 得
1rem = 37.5px。 - 若设计稿为 750px，除以 10 得
1rem = 75px。 建议统一规范并在文档中注明，避免换算错误。
动态设置根字体
核心代码通过立即执行函数 (IIFE) 动态计算 html 的 font-size：
(function(window, document){
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// 修复部分安卓机字体不缩放问题
function setBodyFontSize(){
if(document.body){
document.body.style.fontSize = (12 * dpr) + 'px';
} else {
.(, setBodyFontSize);
}
}
();
(){
rem = docEl. / ;
rem = rem > ? : rem;
docEl.. = rem + ;
}
();
resizeTimer;
.(, (){
(resizeTimer);
resizeTimer = (setRemUnit, );
}, );
.(, (){
(setRemUnit, );
}, );
.(, (){
(e.){
();
}
}, );
(dpr >= ){
fakeBody = .();
testElement = .();
testElement.. = ;
fakeBody.(testElement);
docEl.(fakeBody);
(testElement. === ){
docEl..();
}
docEl.(fakeBody);
}
})(, );
