vue中使用rem适配方案

亲测可用，若有疑问请私信

一、移动端适配常见方案：

    （1）通过媒体查询的方式即CSS3的meida queries
    （2）以天猫首页为代表的 flex 弹性布局
    （3）以淘宝首页为代表的 rem+viewport缩放
    （4）rem 方式

参考博客：https://blog.csdn.net/chenjuan1993/article/details/81710022

二、vue中使用rem适配方案 

 1、安装插件

（这里我使用的是cnpm比较下载安装快速）

cnpm i lib-flexible --save        // 下载lib-flexible

cnpm install px2rem-loader        // 安装px2rem-loader

2、在main.js中引入lib-flexible

import 'lib-flexible/flexible' //引入rem自适应

3、在index.html中添加meta标签

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

4、更改配置

在 build/util.js 中 按如下更改

  (1)、将px2rem-loader添加到cssLoaders中

    const cssLoader = {
        loader: 'css-loader',
        options: {
            sourceMap: options.sourceMap
        }
    }

    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
            //一般设置75
            remUnit: 75 // 37.5按照375设计图尺寸在设计，75安装750设计图尺寸设计
        }
    }

(2)、在generateLoaders方法中添加px2remLoader

    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

        if(loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }

5、重启

npm run dev

参考：https://www.cnblogs.com/dyy-dida/p/11107639.html

ps:还有一种方法实现

借助两个插件，将px进行转化为rem。

lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
主要步骤：

a、npm i -S amfe-flexible

b、import 'amfe-flexible'; //引入rem自适应

c、在index.html中添加meta标签

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

d、npm install postcss-pxtorem --save-dev

e、更改配置

在vue-cli2下，根目录中的 .postcss.js (没有，就新建一个)

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分
      rootValue: 37.5, // 对应16px 适配移动端750px宽度
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

在vue-cli3下,根目录中的 vue.config.js (没有，就新建一个)

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}