vue移动端开发使用rem布局方案之一

web移动端开发必定要考虑的最多问题就是适配，适配安卓，iso以及各类尺寸大小不一的手机甚至有时候还需要适配pad等。因此我总结一下我在做移动端项目开发中使用rem布局，解决大小屏幕适配问题。
项目框架 vue cli3.0
使用插件 lib-flexible postcss-px2rem-exclude

第一步：安装 lib-flexible

npm install lib-flexible --save

第二步：在项目入口文件main.js中引入lib-flexible

import 'lib-flexible'

第三步：使用postcss-px2rem自动转换css单位px为rem

npm install postcss-px2rem-exclude --save
注意：这里本来是使用postcss-px2rem插件，但是由于项目中要引入其他ui库，因此需要使用postcss-px2rem-exclude 插件来排除掉ui组件中的单位。

第四步：在package.json中配置

 "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 75, //这是rem适配的配置  具体参考lib-flexible的规则,如设计图尺寸为750那么配置项为75即可
        "exclude": "/node_modules|floder_name/i"   //排除项 排除第三方ui库中组件的css单位
      }
    }
  }

第五步：特殊项不需要使用rem布局时的处理

当某些字体或者布局需要写成固定px单位时，可以使用在单位之后写上/*no*/
例如

div{
    width:300px; /*no*/
}

以上即完成rem布局配置，在以750为基准的设计图中，获取多少尺寸，在css中即可写多少像素，在浏览器中打开可以看到单位px已经被转化为rem。