本文主要是介绍react + umi中如何使用rem完成自适应布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
只要写css就可以实现：flex + rem布局；
在项目的global.less中根据媒体查询；
媒体查询是用于根据设备的特性（如屏幕尺寸、屏幕方向、分辨率等）来应用不同的 CSS 样式的技术。以下是一些常用的媒体查询尺寸：
-
小屏幕设备（手机）：
- 最大宽度为 576px：
@media (max-width: 576px) { ... }
- 最大宽度为 576px：
-
中等屏幕设备（平板）：
- 最小宽度为 576px：
@media (min-width: 576px) { ... } - 最小宽度为 768px：
@media (min-width: 768px) { ... }
- 最小宽度为 576px：
-
大屏幕设备（台式电脑）：
- 最小宽度为 992px：
@media (min-width: 992px) { ... } - 最小宽度为 1200px：
@media (min-width: 1200px) { ... }
- 最小宽度为 992px：
-
超大屏幕设备（大型显示器、电视等）：
- 最小宽度为 1600px：
@media (min-width: 1600px) { ... }
- 最小宽度为 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>这篇关于react + umi中如何使用rem完成自适应布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
