前言
最近遇到一個(gè)需求，把業(yè)務(wù)封裝成卡片組件，然后通過npm發(fā)布上去給客戶進(jìn)行使用，但是客戶很多項(xiàng)目用到甚至還有移動(dòng)端，這就需要適配多套樣式，這怎么辦？？？
然后想到使用媒體查詢適配但是媒體查詢是識(shí)別視口寬度的用了也不生效啊怎么辦？？？這個(gè)時(shí)候就要想到一個(gè)比較新的布局特性容器查詢
下面一步步舉例說明容器查詢的作用和用法
什么是容器查詢？
媒體查詢
要說容器查詢，那么我們先了解一下類似的媒體查詢-----根據(jù)不同的視口像素顯現(xiàn)不同的樣式。
直接看看效果和實(shí)現(xiàn)代碼。
.test {
height: 1000px;
width: 100%;
background-color: #f8f6f6;
color: #1c0d0d;
display: flex;
justify-content: center;
align-items: center;
.test-c {
height: 100px;
width: 300px;
border: 1px solid red;
}
// 尺寸（1024px 及以下）
@media (max-width: 1024px) {
.test-c {
height: 60px;
width: 200px;
}
}
}
如上所示例子，媒體查詢是用@media屬性去實(shí)現(xiàn)，例如@media (max-width: 1024px)就是當(dāng)視口像素小于1024時(shí)展示里面的樣式，通過這個(gè)方式可以適配不同的屏幕
媒體查詢的用法思路就是這樣，更具體的用法這里就不細(xì)說了
容器查詢
上述媒體查詢只能識(shí)別視口，但使用容器查詢可以更加強(qiáng)大----通過識(shí)別父容器的像素變化而變化。
下面看個(gè)簡(jiǎn)單的小例子感受一下
上述容器查詢例子，里面兩個(gè)方塊是基于父容器的實(shí)際寬度動(dòng)態(tài)樣式，而不是媒體查詢那樣視口寬度進(jìn)行動(dòng)態(tài)樣式，比媒體查詢會(huì)更靈活。
容器查詢用法
簡(jiǎn)而言之容器查詢使用contain 屬性結(jié)合 @container 規(guī)則實(shí)現(xiàn)，具體語法如下所示。
1、 contain其實(shí)是 container-type和container-name的簡(jiǎn)寫，語法格式是格式為container: name / type 把目標(biāo)元素標(biāo)記為容器。
三者的具體屬性如下所示。
一 、container-type 容器具體的類型：
size: 寬度和高度均可以被識(shí)別響應(yīng)。
inline-size: 寬度可以被識(shí)別響應(yīng)。
block-size: 高度可以被識(shí)別響應(yīng)。
二、container-name 具體的查詢標(biāo)識(shí)：
直接輸入自定義的名稱，如果多個(gè)用逗號(hào)分隔開，例如：container-name: test, test2;
三、container 是簡(jiǎn)寫屬性：
語法：container: name / type 例如：container: test / size;
2、@container 的用法跟媒體查詢的@media很相似。
相關(guān)屬性，如下常用屬性可選
min-width 與 max-width：限制容器的寬度觸發(fā)。
min-height 與 max-height：限制容器的高度觸發(fā)。
orientation：識(shí)別容器的橫屏或豎屏方向，landscapess橫屏/portraitj豎屏。
aspect-ratio：識(shí)別容器的寬高比變化。
這樣使用，例如識(shí)別容器的寬高比變化的例子如下
.test {
container-type: size; // 簡(jiǎn)寫容器類型
container-name: test-name;
resize: both;
overflow: auto;
margin: 20px;
border: 2px dashed #666;
min-width: 200px;
min-height: 200px;
background: #f0f0f0;
margin: 100px;
// 橫屏樣式
@container test-name (min-aspect-ratio: 1/1) {
.test-c {
flex-direction: row;
.left {
background: #e8f5e9;
&::after {
content: '(容器寬高比大于等于1)';
}
}
}
}
// 豎屏樣式
@container test-name (max-aspect-ratio: 1/1) {
.test-c {
flex-direction: column;
.right {
background: #fff3e0;
&::after {
content: '(容器寬高比小于1)';
}
}
}
}
}
上面是主要的核心代碼示例重點(diǎn)是2、3和14行代碼，就是container-type: size;與 container-name: test-name; 結(jié)合@container使用。
注意：如果沒有指定 container-name作為響應(yīng)的基準(zhǔn)，@container 默認(rèn)識(shí)別最近的具有 container-type 屬性的容器作為響應(yīng)基準(zhǔn)。
小結(jié)
看完下來你可能會(huì)發(fā)現(xiàn)容器查詢非常適合通用組件的封裝，這個(gè)很好理解，就是讓組件樣式能靈活兼容父層級(jí)的大小尺寸，這個(gè)是媒體查詢無法做到的。
容器查詢就像給網(wǎng)頁元素裝了個(gè)"監(jiān)聽器"，讓它們能根據(jù)所在容器的大小自動(dòng)調(diào)整樣式。比如你把一個(gè)組件放進(jìn)不同大小的iframe里，它自己就知道該變寬還是變窄，根本不用擔(dān)心布局錯(cuò)亂了。
傳統(tǒng)媒體查詢只能看瀏覽器窗口大小，而容器查詢直接盯著自己的父容器尺寸。只要在父元素加上container屬性，子元素用@container就能根據(jù)這個(gè)容器的大小變化調(diào)整布局，特別適合做可復(fù)用的組件。
好像現(xiàn)在主流瀏覽器基本都支持這個(gè)特性了，小伙伴們做嵌套布局或需要組件自適應(yīng)的時(shí)候試試。雖然剛開始用可能有點(diǎn)不習(xí)慣，但掌握了就會(huì)發(fā)現(xiàn)它真香啊，能解決很多實(shí)際開發(fā)中的布局問題。
轉(zhuǎn)自https://juejin.cn/post/7492373338410238002
?
該文章在 2025/4/14 9:01:30 編輯過
400 186 1886
