CSS 基於元素寬度的媒體查詢

Question

例如，有一個模態 DIV，其中包含在最小寬度（720 像素）上從水平變為垂直的響應式選項卡。

這個 div 可以由用戶調整大小！

所以問題是，如果用戶將 div 的大小調整為 600px，則不會發生響應變化，那是因為屏幕寬度沒有變化。

我的問題是：是否有任何技巧或方法可以使 USER RESIZABLE DIV 響應其寬度變化而不是屏幕寬度？ 我試圖弄清楚如何用 calc 做到這一點，但我認為它會是這樣的：

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

但我認為 CSS 不支持這種方式。

非常感謝。

Answer 1

為了達到您在上面評論中所說的結果，我認為一種很好的方法是使用 css grid或flex 。 您可以使您的 div 響應其中之一，而無需媒體查詢。 示例： display: flex; flex-wrap: wrap; .

Answer 2

您可以使用display:flex; and flex-wrap:wrap display:flex; and flex-wrap:wrap 。 我還建議您將字體大小與媒體查詢一起使用，因為如果屏幕寬度減小但您的字體不是。 它可能會出現一些顯示或設計問題。