vue-cli 移动端项目自适应方案postcss-px2rem + lib-flexible

vue 2.x 移动端项目自适应方案

话不多说 直接上代码

1、安装两个插件

postcss-px2rem：将px转换成rem
lib-flexible: 自适应变更html标签的font-size

npm install postcss-px2rem lib-flexible –save

2、main.js引入插件

打开main.js 导入lib-flexible

import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible'
...

3、配置.postcssrc.js文件

根目录找到postcss-px2rem文件，在plugins里面添加属性postcss-px2rem，
其中remUnit的值75表示设计图宽度为750px

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-px2rem": {
      "remUnit": 75
    }
  }
}

emmmm…这样就可以用了

px2rem默认会将所有px转化成rem
在样式后面添加/*no*/，不会将px转成rem，直接跳过
在样式后面添加/*px*/,会根据dpr生成三套代码
注意：备注前面一定要有分号 不然不会被识别

编译前：

.box {
        width: 100px;
        height: 100px; /*no*/
        border: 1px solid #ccc; /*no*/
        font-size: 28px; /*px*/
}

编译后：

.box {
    width: 1.3333rem;
    height: 100px;
    border: 1px solid #ccc;
}
[data-dpr="1"] .box {
	font-size: 14px;
}
[data-dpr="2"] .box {
	font-size: 28px;
}
[data-dpr="3"] .box {
	font-size: 42px;
}

暂时就先这样吧