如何在React中修改基于视口的HTML



我正在使用React,并试图根据设备的视口修改组件的内容。我提出的解决方案是将移动设备的内容和桌面设备的内容封装在两个单独的div中,然后使用CSS"显示:无";以及适当的断点来显示一个div或另一个div。我确信有更好、更有效的解决方案,但我找不到

我更简单的方法是使用媒体查询。这些功能基本上允许您根据浏览器/设备的大小更改CSS,随着大小的变化,您可以通过在媒体查询中添加CSS来决定页面的外观。

请查看此网站以进一步了解:

https://www.w3schools.com/css/css3_mediaqueries.asp

最新更新