vue使用flexible和px2rem实现移动端适配

标签：turn   module   配置   build   ati   function   全局   mod   stc   

首先下载flexible.js和px2rem

npm install px2rem-loader

对webpack进行配置。进入build文件夹对utils.js中的postcssLoader做如下修改

const postcssLoader = {
    loader: ‘postcss-loader‘,
    options: {
      sourceMap: options.sourceMap,
      plugins: function () {
        return [
          require(‘postcss-px2rem‘)({remUnit: 75})
        ]
      }
    }
  }

然后在vue-loader.conf.js中的module.exports里添加

postcss: [
    require(‘postcss-px2rem‘)({remUnit: 75})
  ]

remUnit后的数字为设计稿宽度的十分之一
之后在全局引入flexible.js,在main.js加入

import ‘../static/js/flexible.js‘;

来源：https://segmentfault.com/a/1190000016112264

vue使用flexible和px2rem实现移动端适配

标签：turn   module   配置   build   ati   function   全局   mod   stc   

原文地址：https://www.cnblogs.com/lovellll/p/10145541.html