停止與媒體查詢的鬥爭！使用 CSS 容器查詢代替

曾經建造過一個在主要內容中看起來很完美但在側邊欄中出現問題的組件嗎？ ？

媒體查詢只能解決一半的問題 - 它們關心螢幕大小，而不是組件實際所在的位置。這就是容器查詢的用武之地。

媒體查詢出了什麼問題？

假設您已經建立了此卡片組件：

在行動裝置和桌上型電腦上看起來都很棒！直到...您的隊友將其放入狹窄的側邊欄中。現在你的「桌面」佈局正試圖擠進 300 像素的空間。哎喲。

想要提升您的 CSS 技能嗎？請參閱“取代我的 JavaScript 的現代 CSS 技術”，了解純 CSS 如何取代複雜的 JavaScript 程式碼。

容器查詢：更好的方法

容器查詢不是問“螢幕有多寬？”，而是問“我的容器有多寬？”它們的工作原理如下：

現在您的卡片會適應其容器，而不是螢幕。把它放在任何地方 - 它就可以工作！

真實範例：智慧產品卡

這是一張適合任何空間的產品卡：

瀏覽器支援嗎？

好消息！容器查詢適用於所有現代瀏覽器。對於較舊的瀏覽器，您的行動佈局將成為後備：

想要確定那些 UI 細節嗎？ 《用戶暗評的12個前端微互動》揭示了讓網站感覺精緻的微妙互動。

快速提示

1. 不要將容器查詢嵌套得太深 - 它會變得混亂
2. 當你只需要寬度時使用 inline-size 而不是 size
3. 在不同大小的容器中測試您的組件

自己嘗試！

1. 選擇一個存在於多個地方的組件
2. 將container-type: inline-size 加入其包裝器
3. 用容器查詢取代媒體查詢
4. 看著它自動適應！

想了解更多嗎？

• MDN 指南
• 我可以使用 - 容器查詢

如果您使用容器查詢建立了一些很酷的東西，請發表評論！ ？

以上是停止與媒體查詢的鬥爭！使用 CSS 容器查詢代替的詳細內容。更多資訊請關注PHP中文網其他相關文章！