Vue移动端适配实战：我用rem搞定各种奇葩屏幕！

大家好，我是小杨，一个和移动端适配斗智斗勇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
不需要自己计算！

三、我的实战代码示例

vue 复制代码

<template>
  <div class="container">
    <!-- 直接使用设计稿尺寸 -->
    <div class="box" style="width: 100px; height: 50px;"></div>
    
    <!-- 不想转换的样式加no-rem -->
    <div class="norem-fixed-size">固定尺寸元素</div>
  </div>
</template>

<style scoped>
/* 正常写px，会自动转换 */
.box {
  margin: 10px; /* 会自动转为rem */
  background: #f00;
}

/* 不想被转换的样式 */
.norem-fixed-size {
  width: 1px; /* 不会转换 */
}
</style>

四、常见问题解决方案

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基础上增加最大宽度限制：

javascript

javascript 复制代码

// 在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
媒体查询	精确控制	代码量大	简单页面

六、我的终极建议

中小型项目：直接用rem方案（本文方案）
大型复杂项目：rem+媒体查询结合使用
全新项目：可以考虑vw方案

记住一个原则：不要为了技术而技术，选择最适合项目需求的方案！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！