我希望能够以不同的视口宽度预览页面上的react组件，以触发不同的CSS媒体查询。这是一个组件库，我希望能够向开发人员展示组件在不同屏幕尺寸下的外观。
有关如何解决此问题的任何策略？
答案 0 :(得分：0)
尝试使用规则@media来定义在哪个屏幕尺寸下使用哪些css属性，这是W3schools CSS @media rule的指南
答案 1 :(得分：0)
CSS媒体查询考虑客户端窗口，如果要通过调整浏览器窗口大小来显示组件的行为，则不需要做任何不同的操作。但是，如果您希望将组件放在浏览器中的容器中（如某些div）并允许开发人员调整该容器的大小以查看行为，则可能需要在该容器上复制媒体查询行为。首先，您需要使该容器可调整大小。之后，您需要听取resize事件，然后根据容器的宽度将相关类应用于该容器。
您可以使用此插件使容器可调整大小https://github.com/STRML/react-resizable，然后使用onResize事件来应用适当的css类，以根据容器的宽度显示行为