react ice3 配置postcss-pxtorem

南城夏季

于 2023-04-28 17:28:46 发布

阅读量516

点赞数

分类专栏：业务问题 react 文章标签： react.js postcss javascript

本文链接：https://blog.youkuaiyun.com/weixin_39818813/article/details/130429542

版权

问题同时被 3 个专栏收录

75 篇文章

订阅专栏

业务

61 篇文章

订阅专栏

react

52 篇文章

订阅专栏

文章介绍了如何使用Postcss插件postcss-pxtorem进行px到rem的自动转换，以适应不同屏幕尺寸。首先，需要安装依赖并配置postcss.config.js文件，设置根元素的基准值和转换的CSS属性。接着，创建一个尺寸变化函数setRem，根据屏幕宽度动态调整html的字体大小，以实现响应式布局。最后，函数会在页面加载和窗口大小改变时执行，确保布局在不同设备上适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装依赖

npm install postcss-pxtorem

2.配置文件

根目录新建文件postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 转换的根元素的基准值
      // 正常去情下按照你的设计稿来
      // 1920 宽的设计稿， 1920 / 10 = 192
      // 750 宽的设计稿， 750 / 10 = 75
      // 370 宽的设计稿， 370 / 10 = 37.5
      rootValue: 16,// 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      // 需要转换的CSS属性，*就是所有属性都要转换
      propList: ['*'],
    },
  },
};

3.配置尺寸变化函数

//src\pages\layout.tsx
//设置 rem 函数
function setRem() {
  // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
  const screenWidth = 1920;
  const scale = screenWidth / 16;
  const htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  // 得到html的Dom元素
  const htmlDom = document.getElementsByTagName("html")[0];
  // 设置根元素字体大小
  htmlDom.style.fontSize = htmlWidth / scale + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};