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

本文主要是介绍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>

这篇关于react + umi中如何使用rem完成自适应布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---