rem适配 - 简单讲解和案例（超详细小白修订版）

rem适配 - 简单讲解和案例超详细小白修订版本文是早年旧文的修订版。原博客有几个换算注释写错、还有一张本地图片发到线上就 404 了这里一并修掉并补全了「px 怎么换算成 rem」「现代动态适配」两块内容目标是让纯小白也能照着抄会。 一、什么是 rem为什么要用它rem是 CSS 的一个长度单位它的大小永远跟着html根元素的font-size走。1rem 根元素font-size的 1 倍根font-size: 16px时1rem 16px根font-size: 50px时1rem 50px那它和px比有啥用当你把页面里所有尺寸都写成rem再动态改根元素的font-size整页就会按比例一起放大缩小——这就是「rem 适配」的核心专门用来做不同手机屏幕的等比缩放。em是相对父元素字号rem是相对根元素字号。做适配一律用rem更可控。 二、核心思路一句话讲明白用媒体查询或 JS根据不同屏幕宽度按比例设置html的字号然后页面里所有元素都用rem当尺寸单位。根字号一变所有rem元素跟着变于是整页等比缩放完成适配。 三、px 怎么换算成 rem重点原博客没讲清这是小白最容易卡住的地方记住一个公式就够了。假设你的设计稿宽度是 750px移动端最常见我们把宽度分成 15 份1rem 设计稿宽度 / 份数 750 / 15 50px所以在「设计稿宽度下」1rem 50px。任意 px 转 rem 就是rem px值 ÷ 50设计稿上的 px换算成 rem50px1rem37.5px0.75rem16px0.32rem100px2rem25px0.5rem⚠️常见误区很多人以为0.32rem在任何屏幕都是 16px。错rem是相对的——只有根字号 50px 时它才是 16px。屏幕变窄根字号变小0.32rem也会跟着变小比如根字号 25px 时0.32rem 8px。原博客就是把这里注释写成了12px实际是 8px已修正。✂️ 四、方法一媒体查询手动适配最原始适合理解先上一份修正过错误注释的完整可运行代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metahttp-equivX-UA-CompatiblecontentIEedge!-- 这一行必须加否则手机不会按设备宽度渲染 --metanameviewportcontentwidthdevice-width, initial-scale1.0titlerem 适配演示/titlestylebody{margin:0;padding:0;}/* 把屏幕分成 15 份字号 屏幕宽度 / 15 *//* 注意要写 min-width 和 max-width 兜底否则 PC 端会回退到默认 16px */mediaonlyscreenand(min-width:751px){html{font-size:50px;}/* PC / 大屏固定 50px不让字无限大 */}mediaonlyscreenand(max-width:750px){html{font-size:50px;}/* 750px750/15 50px */}mediaonlyscreenand(max-width:414px){html{font-size:27.6px;}/* 414px414/15 27.6px */}mediaonlyscreenand(max-width:375px){html{font-size:25px;}/* 375px375/15 25px */}/* 下面全部用 rem跟着根字号走 */.title{font-size:0.75rem;}/* 750宽37.5px414宽20.7px375宽18.75px */.content{font-size:0.32rem;}/* 750宽16px 414宽8.83px375宽8px */img{width:1rem;}/* 750宽50px */.box1{width:1rem;height:1rem;background:antiquewhite;}.box2{width:2rem;height:2rem;background:antiquewhite;}.box3_75{width:3.75rem;height:3.75rem;background:antiquewhite;}.box7_5{width:7.5rem;height:7.5rem;background:antiquewhite;}.box15{width:15rem;height:15rem;background:antiquewhite;}/style/headbodydivclasstitle天行健君子以自强不息。/divdivclasscontent我才21岁我好累。/divdivclassbox1/divdivclassbox2/divdivclassbox3_75/divdivclassbox7_5/divdivclassbox15/div/body/html这种方法的问题只有 3 个离散断点屏幕宽度在两个断点之间时是跳变而不是连续缩放而且断点要自己手写维护麻烦。所以工程里一般不用它但它最适合用来搞懂原理。 五、方法二一行 CSS 动态适配推荐丝滑无断点不想写一堆媒体查询用vw一行搞定连续缩放html{/* 100vw 视口宽度除以 15 份效果和上面手动算的一模一样但任何宽度都连续生效 */font-size:calc(100vw / 15);}/* 大屏锁死避免 PC 上字大到爆炸 */mediascreenand(min-width:750px){html{font-size:50px;}}calc(100vw / 15)在 750px 宽 50px375px 宽 25px414px 宽 27.6px——所有宽度自动连续缩放不用再写断点。剩下的元素照样全用rem。️ 六、方法三JS 动态适配lib-flexible 同款思路有些老浏览器 / 特殊场景想要更可控可以用一小段 JS这也是阿里lib-flexible的核心思路(function(){functionsetRem(){vardesignWidth750;// 设计稿宽度varparts15;// 分成 15 份varclientWidthdocument.documentElement.clientWidth;varwidthMath.min(clientWidth,750);// 限制最大宽度PC 端不超 750document.documentElement.style.fontSize(width/parts)px;}setRem();window.addEventListener(resize,setRem);// 屏幕旋转/缩放时重算window.addEventListener(pageshow,setRem);// 从缓存页面返回时重算})();把这段放在head最前面越早执行越好避免闪屏效果和方法二一致但兼容性更稳、还能监听变化。 七、工程化postcss-pxtorem 自动换算如果项目用构建工具Vue / React / Vite可以装postcss-pxtorem你只管写 px它自动帮你转 rem// postcss.config.jsmodule.exports{plugins:{postcss-pxtorem:{rootValue:50,// 对应 750/15 50和上面的换算一致propList:[*],// 所有属性都转},},};注意用了它仍然要保留上面第六节那段setRem的 JS用来动态设根字号否则 rem 没有基准。⚠️ 八、常见坑都是原博客踩过的坑说明忘写 viewport必须加meta nameviewport contentwidthdevice-width, initial-scale1.0否则手机不按真实宽度渲染媒体查询没兜底只写max-width不写min-width兜底PC 端根字号回退 16px布局直接崩换算注释写错像原博客把0.32rem注释成 12px实际只有 8px纯属误导本地图片 404原博客用了./img/二维码.jpg这种相对路径发到线上必挂。图片要传图床拿绝对地址字体太小移动端正文字号别小于 12px否则看着费劲rem 缩放后注意实际值 九、参考链接rem适配原理 - CSDNrem 适配方案 - 知乎详解 rem 适配布局 - 脚本之家vwrem 自适应适配方案 - 知乎Rem 布局的原理解析 - 知乎 十、我的实战偏好能上 UI 库就上 UI 库讲完上面一堆手写 rem 适配说句大实话真正写业务项目的时候我一般不自己手写 rem 那套。不是因为它没用而是——现在主流 UI 库本身就自带自适应 / 响应式能力你站在巨人肩膀上就行没必要重复造轮子。方案我现在用吗说明手写 rem媒体查询 / vw / JS偶尔主要用来理解原理、调非库的原生组件Bootstrap 系列以前用现在不用了经典栅格 响应式断点但风格 / 体积不太合现在口味Element PlusVue 3常用 ✅组件自带响应式布局配 Vue 项目开箱即用为什么我更爱用现成 UI 库栅格系统直接给断点比如 Element Plus 的Row/Col用:xs :sm :md :lg :xl就能按屏幕宽度自动分栏不用自己算750 / 15 50那套。组件自带适配按钮、表单、弹窗、表格这些都是库里调好的移动端不会乱版。省时间还更稳自己手算 rem 容易踩前面列的坑注释写错、断点没兜底、图片 404。但注意rem 原理依然值得学。当你要改库组件的样式、排查为什么这个盒子在手机上突然变小了、或者写库没覆盖的原生模块时懂 rem / vw 才能精准下手。一句话总结原理要懂活儿能交给库就交给库。这篇教程是帮你建立底层认知真上项目Element Plus 这类库才是日常主力。如果我有理解错的地方欢迎在评论区指导修改 这篇文章我会不定期修改补充建议关注收藏方便回头看 ~