html - 基于元素宽度的 CSS 媒体查询

Question

例如，有一个模态 DIV，其中包含在最小宽度（720 像素）上从水平变为垂直的响应式选项卡。

这个 div 可以由用户调整大小！

所以问题是，如果用户将 div 的大小调整为 600px，则不会发生响应变化，那是因为屏幕宽度没有变化。

我的问题是：是否有任何技巧或方法可以使 USER RESIZABLE DIV 响应其宽度变化而不是屏幕宽度？我试图弄清楚如何用 calc 来做，但我认为它会是这样的：

calc(100% - div-width)= ... etc. 

但我认为 CSS 不支持这种方式。

非常感谢。

标签： htmlcssmedia-querieselementresizable

Answer 1

为了达到您在上面评论中所说的结果，我认为一种很好的方法是使用 cssgrid或flex. 您可以使您的 div 响应其中之一，而无需媒体查询。示例：display: flex; flex-wrap: wrap;。