postcss-pxtorem是一个postcss的插件，自动转换px为rem，解决屏幕适配的问题。

1. 安装依赖

  1. npm install postcss-pxtorem -D

2. 修改根目录下配置文件

vue-cli3及以上是postcss.config.js文件， vue-cli3以下是.postcssrc.js

  1. module.exports = {
  2.   plugins: {
  3.     'autoprefixer': {},
  4.     'postcss-pxtorem': {
  5.       rootValue: 128, // 基数，一般1280的设计稿设置128，1920的设计稿设置192
  6.       propList: ['*'], // （数组）可以从 px 更改为 rem 的属性。
  7.       unitPrecision: 12, // （数字）允许 REM 单位增长到的十进制数字。
  8.       selectorBlackList: [/realpx/] 忽略项，规则是class中包含的字符串，可设置正则。比如class中带有realpx的则不进行转换，
  9.     }
  10.   }
  11. };

按照上述配置项目后，即可直接使用设计稿上的px单位开发。

例如设计稿尺寸是1280*720，rootValue设置128
那么某元素的尺寸可以直接按照设计图上该元素的具体尺寸写， 如：

  1. div{
  2.     width: 136px;
  3.   height: 75px;
  4. }

将被转换为：

  1. div{
  2.     width: 1.0625rem;
  3.   height: 0.5859375rem;
  4. }

注意：此插件不支持内联样式