(十九)前端中使用amfe-flexible和postcss-pxtorem

(一) 本节知识点

在vue项目中使用rem适配

(二) 第一步安装

利用安装

npm install amfe-flexible -S
npm install postcss-px2rem -S

postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值

(三) 第二步引入 lib-flexible

在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";

这里特别注意的就是

注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！！

(四) 配置postcss-px2rem

(1) vuecli3 配置

px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）
具体配置内容如下：
postcss-pxtorem 在postcss.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
        }
    }
}

(2) vuecli2 配置

找到根目录下.postcssrc.js文件
然后里面写

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!border*']
    }
  }
}

propList 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem

(五) 使用方法

按照上面的步骤写完后，使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。这样就可以了

(六)不想匹配，也就是不想把px变为rem,可以这样

.nav {
  width: 400px;
  height: 300px;
  background: red;
  border: 1px solid black; /*no*/
}