基于元素宽度的 CSS 媒体查询答案

【问题标题】：CSS Media Query based on element width基于元素宽度的 CSS 媒体查询
【发布时间】：2021-01-24 20:36:16
【问题描述】：

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

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

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

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

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

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

非常感谢。

【问题讨论】：

现在？不，“元素查询”还不存在，尽管我知道它们正在作为下一个 CSS 规范的一部分进行处理。
当<div>小于720px时，你想要什么宽度？ <div> 大于 720px 时你想要什么宽度？
您可以轻松组合css-rules。例如width: 720px; max-width: 100%;。这样你的 div 是 720px 宽，但永远不会比它的父更宽。
@Pieterjan 例如，当 div 的大小调整为小于 720 像素时，其中的 TABS 菜单会变为垂直选项卡，当超过 720 像素时，它会变为水平选项卡菜单

【解决方案1】：

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

【讨论】：

您的解决方案不稳定，但在我的情况下，DIV 包含一个 TAB 导航面板（如部分），它们是水平的，我的代码它们更改为旁边有内容的垂直选项卡，所以在媒体屏幕上没关系，但由于包含的 div 是模态可调整大小的 div，因此仅在更改 div 尺寸时不可能这样做
我明白了。那你能提供一个你的代码的sn-p，以便我进一步看看吗？？

【解决方案2】：

你可以像 xhoni 所说的那样使用display:flex; and flex-wrap:wrap。我还建议您将字体大小与媒体查询一起使用，因为如果屏幕宽度减小但您的字体没有。可能会出现一些显示或设计问题。

【讨论】：