react如何使用px2rem
使用 px2rem 在 React 项目中
在 React 项目中实现 px 到 rem 的转换，可以通过以下方法完成：
安装 postcss-px2rem
通过 npm 或 yarn 安装 postcss-px2rem 插件：
npm install postcss-px2rem --save-dev或
yarn add postcss-px2rem --dev配置 webpack
在 webpack 配置文件中添加 postcss-px2rem 插件：
const px2rem = require('postcss-px2rem');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [px2rem({ remUnit: 75 })]
}
}
}
]
}
]
}
};设置根字体大小
在 HTML 文件中动态设置根字体大小，通常以 750 设计稿为例：
document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';使用 CSS 预处理器
如果使用 Sass 或 Less，配置类似：
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [px2rem({ remUnit: 75 })]
}
}
},
'sass-loader'
]
}直接使用 lib-flexible
另一种方法是结合 lib-flexible 自动转换：
npm install lib-flexible --save在入口文件中引入：
import 'lib-flexible';使用 craco 覆盖 create-react-app 配置
对于 create-react-app 创建的项目，使用 craco 覆盖配置：
npm install @craco/craco craco-postcss --save-dev创建 craco.config.js：
module.exports = {
style: {
postcss: {
plugins: [require('postcss-px2rem')({ remUnit: 75 })]
}
}
};以上方法可以根据项目需求选择合适的方式实现 px 到 rem 的转换，确保页面在不同设备上的适配性。
