網誌

Container Queries:認識自己容器,而非視窗的組件

同一張商品卡片,放在網格裡好端端的,放進狹窄的側邊欄卻整個散開——即使 media query 早已細心調校過。問題不在你的程式碼,而在 media query 問錯了問題:它問的是螢幕有多寬,而不是這個組件實際分配到多少空間。本文探討 container queries 如何把這個問題放回它本該提出的位置,以及當元素變成「查詢容器」時,底層究竟發生了甚麼事。