如何在vue-cli+flexible+px2rem

我采取的方式是淘宝前端团队出品的flexible.js，布局用flex布局，再使用一个工具px2rem来做的

   第一步：我们需要下载flexible.js和px2rem

cnpm install lib-flexible --save

cnpm install px2rewm --save-dev

第二步：引入flexible：在main.js中：

import 'lib-flexible'

第三步：配置px2rem-loader:
在build/utils中配置大号字体部分：

constcssLoader=
{

loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
importLoaders:2
}
}
const px2remLoader={
loader:'px2rem-loader',
options:{
remUnit:75
}
}

px2rem的用法：

直接写px：会转换为rem

在px后面写/*px*/:将会根据dpr不同生成3套代码

在px 后面写/*no*/将会不转换，适合border

例子:编译前：

.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}

编译后：

        

.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}

注：我看了很多文章感觉写的最好的一篇：点击打开链接