分享技术，让快乐不再困难...
本文提供三个方案，从简到繁，目前项目使用方案三
一、自定义rem方案（简单暴力）
在html文件的head标签内添加如下代码
其中7.5为设计稿输出的宽度/100，如果设计稿是一倍图，则改为3.75即可
使用过程只需按照设计稿的宽高/100(如字体是24px,写样式的时候则为.24rem)
绘制1px的边框时，使用0.01rem在andriod webview以及部分低版本ios webview 会看不到，请直接使用1px，并且使用transform: scaleY(0.5)进行缩放
二、通过淘宝flexible.js实现rem自适应
1）、安装lib-flexible和postcss-px2rem：
cnpm install lib-flexible postcss-px2rem -D
2）、在项目入口文件main.js 引入
import 'lib-flexible/flexible'
3）、在html文件的head标签内添加如下代码
4）、px转化为rem，在webpack.dev.conf.js的plugins里添加代码：
new webpack.LoaderOptionsPlugin({
vue: {
postcss: [require('postcss-px2rem')({remUnit: 75})]
},
})
remUnit的值代表了1rem对应的px值，一般750的设计图就设置成75
***1px的边框在转化为rem时，在andriod webview以及部分低版本ios webview 会看不到。处理方法：
如若需要原样输出，则在后面加上注释/ * no * /
.border_style{
border-color: @border_color;
border-style: solid;
border-width: 1px;/*no*/
}
三、使用vw来实现自适应
1）、在html文件的head标签内添加如下代码
2）、安装开发、运行依赖
cnpm install -D postcss-import postcss-url cssnano-preset-advanced
cnpm install -S postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units
**各个依赖功能详情请查看 https://juejin.im/entry/5aa09c3351882555602077ca
3）、新建并且配置 .postcssrc.js文件
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: ‘vw‘, // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: [‘.ignore‘, ‘.hairlines‘], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
},
}
}
4）、vw的兼容处理 （有些手机不支持vw单位 ）
cnpm install -S viewport-units-buggyfill
接着在项目的入口文件（如：main.js）中，加入
let hacks = require(‘viewport-units-buggyfill.hacks‘);
require(‘viewport-units-buggyfill‘).init({
hacks: hacks
});
本文章只提供webpack配置部分，如使用gulp用户，思路相同具体实现可自行google....