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

我正在使用React，并尝试根据设备的视口修改组件的内容。

---

我提出的解决方案是将手机内容和桌面内容分成两个单独的分区，然后使用CSS“display:none”和适当的断点显示一个分区或另一个分区。我确信有更好、更高效的解决方案，但我找不到。

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

请查看此网站以进一步了解情况：

---

您可以对不同的视口使用CSS媒体查询。