gpt4 book ai didi

javascript - 在不同的媒体查询中预览 react 组件

转载 作者:行者123 更新时间:2023-11-28 01:50:00 25 4
gpt4 key购买 nike

我希望能够在页面上以不同的视口(viewport)宽度预览 React 组件,以触发不同的 CSS 媒体查询。这是一个组件库,我希望能够向开发人员展示组件在不同屏幕尺寸下的外观。

关于如何解决这个问题有什么策略吗?

最佳答案

CSS 媒体查询考虑了客户端窗口,如果你想通过调整浏览器窗口的大小来显示组件的行为,你不需要做任何不同的事情。但是,如果您希望将组件放置在浏览器内的容器中(例如一些 div)并允许开发人员调整该容器的大小以查看行为,您可能需要复制媒体查询行为在那个容器上。首先,您需要使该容器可调整大小。之后,您将需要监听该 resize 事件,然后根据容器的宽度将相关类应用于该容器。

您可以使用此插件使容器可调整大小 https://github.com/STRML/react-resizable然后使用 onResize 事件应用适当的 css 类以根据容器的宽度显示行为

关于javascript - 在不同的媒体查询中预览 react 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49995179/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com