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

只要写css就可以实���：flex + rem布局；

在项目的global.less中根据媒体查询；

媒体查询是用于根据设备的特性（如屏幕尺寸、屏幕方向、分辨率等）来应用不同的 CSS 样式的技术。以下是一些常用的媒体查询尺寸：

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

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

   • 中等屏幕设备（平板）：

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

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

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

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

         • 最小宽度为 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;}}//使用：{fontSize:'1rem'}}测试rem