rem自适应之postcss-pxtorem

1.安装插件

// yarn
yarn add postcss-pxtorem

// npm
npm install postcss-pxtorem
// npm i [email protected] --save

如果遇到以下报错，可能是postcss-pxtorem版本过高导致的，安装低版本的postcss-pxtorem即可

【建议使用"postcss-pxtorem": "^5.1.1"】

2.在配置文件中配置

在项目中config/config.js 或者 .umirc.js中添加以下代码：

注意最好不要和umi的hd方案同时用！！

import pxtorem from 'postcss-pxtorem';


export default defineConfig({
   ...otherConfigs, // 项目里其他的一些配置项
  
   extraPostCSSPlugins: [
      pxtorem({
        rootValue: 19.2, // 根据设计稿设置
        propList: ['*'],
        // unitPrecision: 3,
        // viewportUnit: 'vw',
        // selectorBlackList: ['.am-'],
        // minPixelValue: 1,
        // mediaQuery: false,
     }),
   ]
});

3.设置根节点的font-size

设计稿是1920*1080px，pxtorem我们设置rootValue是19.2，19.2px=1rem。

所以根节点的font-size是根据设计稿尺寸缩小100倍

function setRem() {
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  const htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = `${(htmlWidth < 1000 ? 1000 : htmlWidth) / 100}px`;
}

// 初始化
setRem();

// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

4.补充

忽略单个属性的最简单方法是在像素单位声明中使用大写字母，将px写为Px。
```
// 例如
.ignore {
  border: 1Px solid; // ignored
  border-width: 2PX; // ignored
}
```
关于提交到git时大写的PX被自动转换为小写：

1.忽略eslint强制提交

git commit --no-verify -m "XXXXX"

2.在该行css代码前添加忽略

 /* prettier-ignore */
  min-width: 1300PX;

内联样式无法转换成rem，建议在写的时候手动计算rem值。

5.其他

在使用antd或者其他组件库时，有的组件也可能用到内联样式，px没有被转换成rem，导致样式不正确，需要手动修改

6.参数解释

1）rootValue（Number | Function）表示根元素字体大小。

2）unitPrecision （Number）允许REM单位增加的十进制数字。

3）propList （Array）可以从px更改为rem的属性。

值必须完全匹配。
使用通配符*启用所有属性。例：['*']
*在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
使用!不匹配的属性。例：['*', '!letter-spacing']
将“ not”前缀与其他前缀组合。例：['*', '!font*']

4）selectorBlackList （Array）要忽略的选择器，保留为px。

如果value是字符串，它将检查选择器是否包含字符串。

['body'] 将匹配 .body-class

如果value是regexp，它将检查选择器是否匹配regexp。

[/^body$/]将匹配body但不匹配.body

5）replace （Boolean）替换包含rems的规则。

6）mediaQuery （Boolean）允许在媒体查询中转换px。

7）minPixelValue（Number）设置要替换的最小像素值。

8）exclude（String, Regexp, Function）要忽略并保留为px的文件路径。

如果value是字符串，它将检查文件路径是否包含字符串。

'exclude' 将匹配 \project\postcss-pxtorem\exclude\path

如果value是regexp，它将检查文件路径是否与regexp相匹配。

/exclude/i 将匹配 \project\postcss-pxtorem\exclude\path

如果value是function，则可以使用exclude function返回true，该文件将被忽略。

回调函数会将文件路径作为参数传递，它应该返回一个布尔结果。

function (file) { return file.indexOf('exclude') !== -1; }