大家好，我是小杨，一个和移动端适配斗智斗勇6年的前端er。今天要和大家分享的是我在Vue项目中最常用的移动端适配方案——rem布局。记得刚入行时，我被各种尺寸的手机屏幕折磨得够呛：明明在iPhone上好好的页面，到小米手机上就乱成一锅粥。后来掌握了rem这个神器，终于可以优雅地解决各种屏幕适配问题。下面就把我的实战经验分享给大家！ *** ### **一、为什么要用rem？** 先说说我踩过的坑： * 用px布局：在不同尺寸屏幕上要么太大要么太小 * 用百分比布局：计算复杂，维护困难 * 用vw/vh：兼容性要求高，老项目不敢用 **rem的优势**：\ ✅ 根字体大小可控\ ✅ 适配各种屏幕尺寸\ ✅ 计算简单，维护方便 *** ### **二、手把手配置rem适配** #### **1. 安装必备工具** ```bash npm install postcss-pxtorem amfe-flexible -D ``` #### **2. 配置flexible.js（动态设置根字体大小）** 在main.js中引入： ```javascript import 'amfe-flexible' ``` #### **3. 配置postcss-pxtorem（自动转换px为rem）** 在项目根目录创建`postcss.config.js`： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 设计稿宽度/10（比如375设计稿就是37.5） propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem开头的class } } } ``` #### **4. 设计稿使用技巧** 假设设计稿是375px： * 直接量取设计稿尺寸（如100px） * 代码中直接写100px，会自动转换为rem * 不需要自己计算！ *** ### **三、我的实战代码示例** ```html ``` *** ### **四、常见问题解决方案** **Q1：边框1px问题怎么解决？** ```css .border { position: relative; } .border::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ddd; transform: scaleY(0.5); } ``` **Q2：iPad等大屏设备怎么适配？**\ 在flexible.js基础上增加最大宽度限制： // 在main.js中 document.documentElement.style.fontSize = Math.min(75, document.documentElement.clientWidth / 10) + 'px' **Q3：字体不想用rem怎么办？** ```css /* 用@media媒体查询控制字体大小 */ .title { font-size: 16px; } @media screen and (min-width: 768px) { .title { font-size: 18px; } } ``` *** ### **五、其他适配方案对比** | 方案 | 优点 | 缺点 | 适用场景 | | ----- | --------- | ------ | --------- | | rem | 兼容性好，计算简单 | 需要配置工具 | 大部分移动端项目 | | vw/vh | 原生支持，更灵活 | 兼容性要求高 | 新项目，不考虑IE | | 媒体查询 | 精确控制 | 代码量大 | 简单页面 | *** ### **六、我的终极建议** 1. **中小型项目**：直接用rem方案（本文方案） 2. **大型复杂项目**：rem+媒体查询结合使用 3. **全新项目**：可以考虑vw方案记住一个原则：**不要为了技术而技术，选择最适合项目需求的方案！** ## ⭐ 写在最后 > 请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏. > > ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式 > > ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法 > > ✅ 对于文章中部分内容不理解 > > ✅ 解答我文章中一些疑问 > > ✅ 认为某些交互,功能需要优化,发现BUG > > ✅ 想要添加新功能,对于整体的设计,外观有更好的建议 > > ✅ 一起探讨技术加qq交流群：[906392632](https://qm.qq.com/cgi-bin/qm/qr?k=P2hE4MESJEHOwpBFPrAME1oTKqsLcA4m\&jump_from=webapi\&authKey=wuPbPtFsfgSInZP/9I9dSY7rhk9PScl6h6rUFUFtV4KOZY/+2D0xiqXSWRuYZs2f) > > 最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！\ >