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

时间:2021-01-24 20:36:16

标签: html css media-queries element resizable

例如,有一个模态 DIV,其中包含在最小宽度 (720px) 上从水平变为垂直的响应标签。

此 div 可由用户调整大小!

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

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

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

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

非常感谢。

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

相关问题