在現代 Web 開發中，自適應的設計已經成為必備技能。在使用傳統的媒體查詢（Media Queries）雖然能讓我們能夠根據視窗大小調整佈局，但對於需要模組化和元件化的開發方式來說，我們更需要能夠讓元件內的元素自動配合容器的尺寸做更精準的調整，如常見的字體的大小、字距、行距、圓角的弧度等等。
什麼是 cqi？
cqi 是 CSS 新推出的一種「容器單位（Container Units）」，全名是「Container Query Inline」。其單位的家族還包含 cqw、cqh、cqb、cqmin、cqmax，分別對應容器的寬、高、區塊軸、最小與最大尺寸。
它的功能是讓你根據元素所在容器的寬度來設定樣式，比如字體大小、間距、元件尺寸等等，以實現更加獨立及彈性的自適應網頁元件。
Container 的 root 單位
其實 cqi 的使用方式有點類似 rem 與 em 的關係。
當我們設定了 rem，就可以知道一個 em 實際是多少；當網頁需要調整整體比例時，只需要改動 rem 的值，就能讓所有使用 em 的元素跟著連動變化，維持一致的比例。
同樣地，cqi 可以被視為是「容器內的 root 單位」。當你設定了容器的 container-type，就像是為該容器建立了一個局部的根基，裡面的元件使用 cqi 時，就會以這個容器的尺寸作為計算依據，讓整個元件能更獨立、彈性地隨容器變化。
為什麼要用 cqi？
在傳統響應式設計中，我們常用 vw（視窗寬度）或 %（相對於父元素）這類單位，這些單位會受到元件內各種蜂巢狀結構的影響，導致元件無法精準地根據自身容器的大小自動調整。
而 cqi 正是為了解決這個問題。它讓元件的尺寸與樣式可以依照容器自身的大小調整，只要指定包覆元件的容器是哪一個，就能擺脫元件對外部環境的依賴。這種設計方式不僅更具彈性，也方便元件重複使用，特別適合像卡片、按鈕、彈跳視窗等需要高自適應能力的 UI 元件。
計算的基準點
當你使用 vw 時，需要知道目前的設定 Viewport 的大小，而當你使用 ％ 時，則需清楚的知道目前所屬位置的親子關係。這是因為他們都會影響最後的計算結果。
因此，當你使用 cqi 時，有三點需要注意：
- 首先，你需要知道最近設定 container-type: inline 的容器在哪個位置，他會決定接下來容器內所有使用 cqi 的元件要依據哪個容器的尺寸去換算。
- 其二，當你設定 ＠container 並指定特定容器時，計算的基準點會變成這個指定的容器，就算其下有其他子容器也設定成 container-type: inline，這些子容器的設定會被跳過。(重要)
- 其三、橫書與直書的內容會受到 container-type: inline 的設定而有所不同。
當你的內容為橫書時 (writing-mode: horizontal-tb)，會以容器的寬度來換算；
反之，當你的內容為直書時 (writing-mode: vertical-rl 或 vertical-lr)，則改成以容器的高度去換算。
什麼是 @container?
@container 與 @media 的用法有點類似，兩者都用來建立條件，並根據不同的條件給予不同的設定。差別在於：
- @container 是針對「某個容器」
- @media 是針對「整個視窗（viewport）」
