react + umi中如何使用rem完成自适应布局

只要写css就可以实现：flex + rem布局；
在项目的global.less中根据媒体查询；
媒体查询是用于根据设备的特性（如屏幕尺寸、屏幕方向、分辨率等）来应用不同的 CSS 样式的技术。以下是一些常用的媒体查询尺寸：

1. 小屏幕设备（手机）：

   • 最大宽度为 576px：@media (max-width: 576px) { ... }

2. 中等屏幕设备（平板）：

   • 最小宽度为 576px：@media (min-width: 576px) { ... }
   • 最小宽度为 768px：@media (min-width: 768px) { ... }

3. 大屏幕设备（台式电脑）：

   • 最小宽度为 992px：@media (min-width: 992px) { ... }
   • 最小宽度为 1200px：@media (min-width: 1200px) { ... }

4. 超大屏幕设备（大型显示器、电视等）：

   • 最小宽度为 1600px：@media (min-width: 1600px) { ... }

此外，还可以针对屏幕方向、分辨率等进行媒体查询。例如：

• 横屏设备：@media (orientation: landscape) { ... }
• 竖屏设备：@media (orientation: portrait) { ... }
• 高分辨率设备：@media (min-resolution: 2dppx) { ... }

html{
	font-size:16px;
}
@media (min-width: 992px){
	html{
		font-size:12px;
	}
}
@media (min-width: 1200px) { 
	html{
			font-size:16px;
	}
}

//使用：
<p style={{fontSize:'1rem'}}>测试rem</p>