vue不同屏幕分辨率适配(px2remLoader的方法)

vue不同屏幕分辨率适配(px2remLoader的方法)

采用的是 lib-flexible的可伸缩布局的方法

1、下载lib-flexible

npm i lib-flexible --save

2、在项目入库文件main.js里引入lib-flexible

import 'lib-flexible'

3、下载px2rem-loader

npm i px2rem-loader --save-dev

4、在build文件下utils.js里对px2rem进行配置

var cssLoader = {
     
loader: 'css-loader',
    options: {
     
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
     
loader: 'px2rem-loader',
    options: {
     
    remUnit: 192
  }
}

function generateLoaders(loader, loaderOptions) {
     
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    //其他代码
}