react中如何使用rem
使用 rem 单位的必要性
rem（root em）是基于根元素（html）字体大小的相对单位，适配不同屏幕尺寸时更灵活。在 React 项目中实现 rem 适配，通常需要结合 CSS 和 JavaScript 动态调整根字体大小。
基础配置方法
在项目的公共 CSS 文件（如 index.css）中设置根元素字体大小基准值：
html {
font-size: 16px; /* 默认基准值 */
}组件样式文件中直接使用 rem 单位：
.container {
width: 20rem; /* 基于 html 的 font-size 计算 */
padding: 1.5rem;
}动态计算 rem 基准值
通过 JavaScript 动态计算 html 的 font-size，通常放在入口文件（如 index.js）：
function setRemUnit() {
const docEl = document.documentElement;
const designWidth = 1920; // 设计稿宽度
const baseSize = 16; // 基准值
const scale = docEl.clientWidth / designWidth;
docEl.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
window.addEventListener('resize', setRemUnit);
window.addEventListener('pageshow', setRemUnit);
setRemUnit();PostCSS 插件自动转换
安装 postcss-pxtorem 插件自动将 px 转为 rem：
npm install postcss-pxtorem --save-dev在 postcss.config.js 中配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基准值
propList: ['*'], // 转换所有属性
selectorBlackList: [/^html$/] // 排除 html 标签
}
}
}响应式媒体查询补充
结合媒体查询应对极端分辨率：
@media screen and (max-width: 480px) {
html {
font-size: 12px;
}
}
@media screen and (min-width: 2560px) {
html {
font-size: 24px;
}
}TypeScript 项目中的类型支持
为 CSS 模块添加类型声明（如 styles.module.css.d.ts）：
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}注意事项
移动端项目建议将设计稿宽度设为 375px，PC 端根据实际设计稿尺寸调整。动态计算时需考虑防抖处理，避免频繁重绘。测试阶段需验证不同 DPR（设备像素比）下的显示效果。
