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

大家好，我是小杨，一个和移动端适配斗智斗勇6年的前端er。今天要和大家分享的是我在Vue项目中最常用的移动端适配方案——rem布局。

记得刚入行时，我被各种尺寸的手机屏幕折磨得够呛：明明在iPhone上好好的页面，到小米手机上就乱成一锅粥。后来掌握了rem这个神器，终于可以优雅地解决各种屏幕适配问题。下面就把我的实战经验分享给大家！

一、为什么要用rem？

先说说我踩过的坑：

rem的优势：

根字体大小可控

适配各种屏幕尺寸

计算简单，维护方便

二、手把手配置rem适配1. 安装必备工具

npm install postcss-pxtorem amfe-flexible -D

2. 配置flexible.js（动态设置根字体大小）

在main.js中引入：

import 'amfe-flexible'

3. 配置postcss-pxtorem（自动转换px为rem）

在项目根目录创建postcss.config.js：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10（比如375设计稿就是37.5）
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem开头的class
    }
  }
}

4. 设计稿使用技巧

假设设计稿是375px：

三、我的实战代码示例

<template>
  <div class="container">
    
    <div class="box" style="width: 100px; height: 50px;">div>
    
    
    <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问题怎么解决？

.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怎么办？

/* 用@media媒体查询控制字体大小 */
.title {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .title {
    font-size: 18px;
  }
}

五、其他适配方案对比方案优点缺点适用场景

rem

兼容性好，计算简单

需要配置工具

大部分移动端项目

vw/vh

原生支持whatsapp网页版 whatsapp网页版，更灵活

兼容性要求高

新项目，不考虑IE

媒体查询

精确控制

代码量大

简单页面

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

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

写在最后

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

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

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

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

解答我文章中一些疑问

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

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

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

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

免责声明：由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权，根据《信息网络传播权保护条例》，如我们转载的作品侵犯了您的权利,请您通知我们，请将本侵权页面网址发送邮件到qingge@88.com，深感抱歉，我们会做删除处理。

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

相关阅读