在vue配置自适应移动端、pc端页面，react大差不差
第一步、安装
npm install lib-flexible --save
npm install postcss-loader postcss-px2rem --save
（第二步）配置
引入：import ‘lib-flexible’
添加meta标签 --在项目根目录index.html中添加meta
（https://www.jianshu.com/p/3a660fcf868b）在vue-loader.config.js增加了两个配置
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction,
usePostCSS: true//这里设置为true,否则vue引入css会报错
}),
**postcss: [//postcss配置
require(‘postcss-px2rem’)({remUnit: 37.5}),//设计图尺寸/10
],
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: [‘src’, ‘poster’],
source: ‘src’,
img: ‘src’,
image: ‘xlink:href’
}
}
如需适配pc端，则在flexible.js中修改以下内容：
（第三步）将代码修改为适应PC端的代码
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
//缩放比例，可按实际情况修改
var rem = width / 10
docEl.style.fontSize = rem + ‘px’;
flexible.rem = win.rem = rem;
}
对于不想被转换的样式，可在其后添加/no/保证不被转换
eg: border: 1px;/no/
