如何解决基于元素宽度的 CSS 媒体查询
例如,有一个模态 DIV,其中包含在最小宽度 (720px) 上从水平变为垂直的响应标签。
此 div 可由用户调整大小!
所以问题是如果用户将 div 的大小调整为 600px 不会发生响应性变化,那是因为屏幕宽度没有变化。
我的问题是:是否有任何技巧或方法可以让 USER RESIZABLE DIV 响应其宽度变化而不是屏幕宽度? 我试图弄清楚如何用 calc 来做,但我认为它会是这样的:
calc(100% - div-width)= ... etc.
但我认为 CSS 不支持这种方式。
非常感谢。
解决方法
为了达到您在上述评论中所说的结果,我认为一种好方法是使用 css grid
或 flex
。您可以使您的 div 响应其中之一,而无需媒体查询。
示例:display: flex;
flex-wrap: wrap;
。
您可以像 xhoni 所说的那样使用 display:flex; and flex-wrap:wrap
。我还建议您将字体大小与媒体查询一起使用,因为如果屏幕宽度减小但您的字体没有减小。可能出现了一些显示或设计问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。