移动端开发通用适配

适配基于 vue-cli,lib-flexible,px2rem-loader;

1.安装 lib-flexible,完成后在 main.js 中引入,

npm install --save lib-flexible

//main.js
import 'lib-flexible/flexible';

2.安装 px2rem-loader

npm install --save px2rem-loader

3、build 文件夹下的 utils.js 中修改配置

const cssLoader = {
loader: 'css-loader',
options: {
minimize:process.env.NODE_EVN==='production',
sourceMap: options.sourceMap
}
}
const px2remLoader={
    loader:'px2rem-loader',
    options:{
      remUnit:37.5  //根据设计稿设置,375px设计稿=37.5,   750px设计稿=75 
    }
}

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

 

4、开发单位单位使用px,运行后,会自动转成rem。

原文地址:https://www.cnblogs.com/ygjoe/p/9890359.html