一、包安装
1、必需
yarn add postcss-pxtorem -D
2、可选
yarn add amfe-flexible
二、配置 index.html
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1.0">
<!-- 如果安装了 amfe-flexible 包 -->
<scriptsrc="./node_modules/amfe-flexible/index.js"></script>
<!-- 如果没安装 amfe-flexible 包（其实就是把包的源码抄过来了） -->
<!-- 自动计算，将根元素 font-size 设置为屏幕宽度的 1/10 -->
<script>
!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
</script>
三、配置 postcss
【这一步很关键，官方README没写】
创建配置文件： postcss.config.js
【配置示例】
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75, //结果为：设计稿元素尺寸/75，比如元素宽750px,最终页面会换算成 10rem（按750宽设计稿配置）
propList: ['*'],
exclude: /node_modules/i,
},
},
};
【更多配置】postcss-pxtorem
搞定。
