一、前言

Vue CLI 内部使用了 PostCSS。并且默认开启了 autoprefixer。

二、使用 postcss-pxtorem

1. 安装 postcss-pxtorem

  1. $ npm install postcss-pxtorem

2. 项目根目录下创建 postcss.config.js 文件并写入如下内容

  1. // postcss.config.js
  3. module.exports = {
  4.   plugins: {
  5.     autoprefixer: {
  6.       // 不需要设置 browsers 属性了，它会自动去读取 .browserslistrc 配置文件
  8.       // browsers: ['Android >= 4.0', 'iOS >= 8'],
  9.     },
  11.     'postcss-pxtorem': {
  12.       // 转换的基准值 1rem = 37.5px
  13.       // xrem = 44px
  14.       rootValue: 37.5,
  15.       propList: ['*']
  16.     }
  17.   }
  18. }

3. 重新运行项目（npm run serve）

就能看到 px 自动转换成了 rem

PS: 如果希望某个样式的 px 不进行转换的化，将 px 写成 大写的 PX 即可

4. 使用 amfe-flexible 动态修改根元素的 font-size 大小

1. 下载并保存到项目的 public/lib 目录中 下载链接

2. public/index.html 中引入（推荐在 head 部分引入）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   ...
  6.   <script src="./lib/flexible.js"></script>
  7. </head>
  9. <body>
  10.   <div id="app"></div>
  11.   <!-- built files will be auto injected -->
  12. </body>
  14. </html>

5. 完成

参考链接