VUE-CLI3+PX2REM-LOADER+SCSS移动端自适应配置

发表于 | 分类于

1 前言

移动端自适应需要做适配，本文介绍vue-cli3+px2rem-loader+scss的配置

2 安装

amfe-flexible：根据设备宽度，修改根元素html的大小，以适配不一样终端
px2rem-loader：将css中的px转为rem单位，用了它就不用本身计算rem值了

注意：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小

安装amfe-flexible和px2rem-loader:

1
2
npm install amfe-flexible -save
npm install px2rem-loader -save-dev

3 配置amfe-flexible

在入口文件main.js文件中引入amfe-flexible：

1
import 'amfe-flexible/index.js'

在index.html中修改meta：

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

amfe-flexible干了什么呢？

  • 给元素动态改写font-size的值
  • 设置1rem = viewWidth / 10
  • 设置页面刷新时重置rem
  • 支持0.5px

4 配置px2rem-loader

在vue.config.js中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .oneOf('vue')
      .use('px2rem')
      .loader('px2rem-loader')
      .before('postcss-loader')
      .options({
        remUnit: 75 // 设计稿的宽度的1/10
      }).end()
  }
}

然后重启脚手架

5 参考文章

《vue移动端h5适配解决方案（rem or vw）》
《vue-cli3+lib-flexible+postcss-px2rem+less》