提问人：Stalkium 提问时间：1/25/2021 最后编辑：Zaid AlyStalkium 更新时间：1/25/2021 访问量：4548
基于元素宽度的 CSS 媒体查询
CSS Media Query based on element width
问：
例如，具有包含响应式选项卡的模态 DIV，这些选项卡在最小宽度 （720px） 上从水平变为垂直。
这个div可以由用户调整大小！
所以问题是，如果用户将 div 的大小调整为 600px，则不会发生响应性更改，这是因为屏幕宽度没有改变。
我的问题是：是否有任何技巧或方法可以使 USER RESIZABLE DIV 响应其宽度变化而不是屏幕宽度？ 我试图弄清楚如何使用 calc 来做到这一点，但我认为它会是这样的：
calc(100% - div-width)= ... etc.
但我不认为CSS支持这种方式。
多谢。
答：
2赞
Xhoni Komini
1/25/2021
#1
为了达到您在上面的评论中所说的您正在寻找的结果，我认为一个很好的方法是使用 css 或 .您可以使用其中之一使 div 响应，而无需媒体查询。
例：。gridflexdisplay: flex;flex-wrap: wrap;
评论
0赞
Stalkium
1/25/2021
您的解决方案不稳定，但在我的情况下，DIV 包含一个选项卡导航面板（如部分），它们是水平的，我的代码它们更改为垂直选项卡，旁边是内容，所以在媒体屏幕上是可以的，但由于包含的 div 是模态可调整大小的 div，因此在仅更改 div 尺寸时无法做到这一点
0赞
Xhoni Komini
1/25/2021
我理解。那么你能提供你的代码片段，以便我可以进一步查看吗？
0赞
Ahmet Suhan Oka
1/25/2021
#2
你可以像 xhoni 所说的那样使用。此外，我建议您在媒体查询中使用字体大小，因为如果屏幕宽度减小但您的字体没有减小。它可能发生了一些显示或设计问题。display:flex; and flex-wrap:wrap
评论
<div><div>width: 720px; max-width: 100%;