关于vue中使用rem问题

1.下载lib-flexible

我使用的是vue-cli+webpack，所以是通过npm来安装的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安装px2rem-loader

npm install px2rem-loader

4.配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，将下面代码加进cssLoaders方法中

  const px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUint: 75

    }

  }

同时，在generateLoaders方法中添加px2remLoader

  function generateLoaders (loader, loaderOptions) {

    const loaders = [cssLoader, px2remLoader]

    if (options.usePostCSS) {

      loaders.push(postcssLoader)

    }

    if (loader) {

      loaders.push({

        loader: loader + '-loader',

        options: Object.assign({}, loaderOptions, {

          sourceMap: options.sourceMap

        })

      })

    }

5、重启

当配置完之后，重启下服务，px会自动转化为rem了

npm run dev

6、注意事项

1、不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加！

2、对css中文字样式增加/* px */后缀，会编译出适应不同dpr的字号

.text{

    font-size: 28px; /* px */

}

// 会被编译成如下：

[data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比

    font-size: 14px;

}

[data-dpr="2"] .text {

    font-size: 28px;

}

[data-dpr="3"] .text {

    font-size: 42px;

}

3、对边框样式增加/* no */后缀，会保持原样

.box{

    border: 1px solid #fff; /* no */

}

// 会被编译成如下：

.box{

    border: 1px solid #fff;

}

巴特西