postcss-pxtorem + react 设置移动端适配，px转换为rem

创建react项目

npx react-create-app myapp 创建的react项目:
"react": "^18.2.0",
创建好以后运行：

npm run eject

打开隐藏的webpack配置项

安装 postcss-pxtorem

npm install postcss-pxtorem 

记录一下版本号 "postcss-pxtorem": "^6.0.0",

给根元素html设置font-size属性

src/index.js中：
这里匹配的是750px的设计稿，转换倍数是100倍，设置100px后会转换成1rem

// 设置 rem 函数
function setRem () {
  document.documentElement.style.fontSize = '100px'
}
// 初始化
setRem()

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

配置webpack

config/webpack.config.js

propList 需要把px转换成rem的属性，可以一一配置，这里直接使用通配符 *

      require('postcss-pxtorem')({
                    rootValue: 100,  // 同html的fount-size大小， 
                    unitPrecision: 2, // 转换成rem后保留小数点后2位
                    // propList: ['width','height','font', 'font-size', 'line-height', 'letter-spacing'], // 需要转换的css元素
                    propList: ['*'], // 需要转换的css元素
                    selectorBlackList: [],
                    replace: true,
                    mediaQuery: false,
                    minPixelValue: 0,
                    exclude: /node_modules/i
                  }),

配置完毕后， 重新npm run start 启动项目

使用

css 中 正常使用px

.h5-page {
  width: 750px;
  height: 1200px;
  border-bottom:  1px solid red;
}

.content-title {
  font-size: 44px;
  color: #333333;
  text-align: center;
  line-height: 66px;
  font-weight: 600;
  margin: 40px auto;
}

浏览器中显示

成功转换成rem