Vue项目配置rem移动端适配

现在市面上移动设备大小各异，为了统一的产品形态和良好的用户体验，所以在做移动H5项目时，需要考虑到移动端适配问题。本文就讲讲Vue+H5项目配置rem移动端适配。

Vue+H5适配

一、项目介绍

• 脚手架CLI：@vue/cli
• Vue版本：2.6.11
• 移动UI组件库：Vant#2.10.14
• CSS预处理器：sass

二、配置lib-flexible插件

• 下载插件

npm i -D lib-flexible

• 导入：在src/main.js中使用

import 'lib-flexible'

三、项目配置

• 安装postcss-px2rem和postcss-loader插件依赖

npm i -D postcss-px2rem postcss-loader

提示： 如果项目使用了第三方的UI组件库（文本以VantUI为例），而又不想让组件库的px转为rem，则需要安装postcss-px2rem-exclude。

npm i -D postcss-px2rem-exclude

• 在vue.config.js中配置，如果没有此文件，在根目录新建即可。

// vue.config.js
module.exports = {
  // ...
  css: {
    sourceMap: true,
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          /* rem适配忽略文件目录 */
          require('postcss-px2rem-exclude')({
            remUnit: 75,  // 参数 1
            exclude: /node_modules|vant/i,  // 参数 2
          }),
        ],
      },
    },
  },
  // ...
}

• 使用Vite脚手架工具构建的Vue项目，可以进行如下操作：
  1. 在根目录下新建postcss.config.js文件
  2. 配置内容如下：

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-px2rem-exclude': {
            remUnit: 75,
            exclude: /node_modules|vant/i
        }
    }
};

参数解释

• remUnit：这个值是一个计算单位，相当于 1rem = 75px
• exclude：是一个正则表达式，忽略rem编译检查的目录，上边的配置是要把node_modules和vant目录排除，此文件中的px不需要转rem。如果还有其他目录需要忽略的在此添加就可以。
• remUnit的值是根据UI设计稿的页面宽度来定，现在通用的尺寸有750px和375px两种。如下配置仅供参考：

设计稿宽度	参数值	UI尺寸	CSS样式
375px	37.5	20px	20px
375px	75	12px	24px
750px	75	32px	32px

注意：

1. 此方法对于内联样式和:style属性中的动态样式不生效。
2. 对于px值比较小的转换不友好，因为px转成rem后，值是很小的小数。例如：1px的border转换后有些机型直接不展示，还有使用border-radius绘制的小圆圈或小圆点，转换后估计是个椭圆。例：

.border {
    border: 1px solid #ddd;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #00b1fb;
    border-radius: 4px;
}

3. 解决方法比较简单，对于比较小尺寸的可以忽略转换（当然也可以使用transform+scale来实现）。
4. 忽略转换可以加注释/* no */，或者使用大写的PX，具体如下：

/* 忽略写法 1 */
.border {
    border: 1PX solid #ddd;
}

/* 忽略写法 2 */
.border {
    border: 1px solid #ddd; /* no */
}

.dot {
    width: 8px; /* no */
    height: 8px; /* no */
    background-color: #00b1fb;
    border-radius: 4px; /* no */
}

---

《Vue3学习与实战》系列

• Vue3学习与实战 · 组件通信
• Vue3学习与实战 · 全局挂载使用Axios
• Vue3学习与实战 · 配置使用vue-router路由
• Vue3学习与实战 · Vuex状态管理
• vue3 + vite实现异步组件和路由懒加载
• Vite+Vue3+Vant快速构建项目

---

欢迎访问：天问博客