建站
咨詢
售后
建站咨詢
新聞中心
CSS容器查詢終于來(lái)了! 它們目前在谷歌瀏覽器（105）中得到了支持，很快就會(huì)在Safari 16中得到支持。這對(duì)前端來(lái)說(shuō)容器查詢與媒體查詢一樣重要。
在這節(jié)課中，我們介紹一下容器查詢是如何工作的，如何使用它們，以及語(yǔ)法是什么樣子的，并分享一些現(xiàn)實(shí)生活中的例子和用例。
簡(jiǎn)介
在設(shè)計(jì)一個(gè)組件時(shí)，我們需要適配不同的變化，并根據(jù)CSS類(lèi)或視口大小來(lái)改變它們。這對(duì)于我們開(kāi)發(fā)來(lái)說(shuō)不是很理想，會(huì)迫使我們根據(jù)變化類(lèi)或視口尺寸來(lái)寫(xiě)CSS。
考慮下面例子：
我們有一個(gè)卡片組件，當(dāng)視口足夠大時(shí)，它應(yīng)該切換到水平樣式。乍一看，這可能聽(tīng)起來(lái)不錯(cuò)。然而，當(dāng)你更深入地思考這個(gè)問(wèn)題時(shí)，它就有點(diǎn)復(fù)雜了。
如果我們想在不同的地方使用同一個(gè)卡片組件，比如在空間狹小的側(cè)邊欄和有更多空間的主區(qū)域，我們就需要使用不同的類(lèi)來(lái)適配：
.c-article {
/* Default stacked style */
}
@media (min-width: 800px) {
/* Horizontal style. */
.c-article--horizontal {
display: flex;
align-items: center;
}
}如果我們不想用上面的方式，那么會(huì)出現(xiàn)下面這樣的情況：
這種從用戶界面的角度來(lái)看，并不友好。
通過(guò)容器查詢，我們可以簡(jiǎn)單地編寫(xiě)響應(yīng)父級(jí)或容器寬度的CSS。請(qǐng)看下圖：
注意到在媒體查詢中，我們是如何根據(jù)視口或屏幕寬度來(lái)查詢一個(gè)組件的。在容器查詢中，同樣的情況發(fā)生在父級(jí)上。
什么是容器查詢？
通過(guò) container-type 屬性查詢一個(gè)組件與最接近的父類(lèi)的關(guān)系，該父類(lèi)有一個(gè)定義的包含物。
我們過(guò)去在媒體查詢中寫(xiě)CSS的方式，但只是針對(duì)組件層面。
容器查詢語(yǔ)法
要根據(jù)一個(gè)組件的父級(jí)寬度查詢，我們需要使用 container-type 屬性。看下面的例子"
.wrapper {
container-type: inline-size;
}有了這些，我們就可以開(kāi)始查詢一個(gè)組件。在下面的例子中，如果.card元素的容器的寬度等于400px或更大，我們需要添加一個(gè)特定的樣式。
@container (min-width: 400px) {
.card {
display: flex;
align-items: center;
}
}雖然上述方法可行，但當(dāng)有多個(gè)容器時(shí)，就會(huì)造成混亂。為了避免這種情況，最好為一個(gè)容器命名。
.wrapper {
container-type: inline-size;
container-name: card;
}現(xiàn)在，我們可以在 @container 旁邊加容器名稱(chēng)，如下所示。
@container card (min-width: 400px) {
.card {
display: flex;
align-items: center;
}
}完整代碼：
.wrapper {
container-type: inline-size;
container-name: card;
}
.c-article {
/* Default stacked style */
}
@container card (min-width: 400px) {
/* Horizontal style. */
.c-article {
display: flex;
align-items: center;
}
}瀏覽器支持
容器查詢現(xiàn)在在Chrome 105中得到支持，并很快在Safari 16中得到支持。
事例
這邊有10個(gè)關(guān)于容器查詢的事例，地址：https://lab.ishadeed.com/container-queries。
網(wǎng)站名稱(chēng)：CSS容器查詢終于來(lái)了，你知道嗎？
地址分享：http://www.5511xx.com/article/cojhgpj.html
