前言

最近遇到一個(gè)需求，把業(yè)務(wù)封裝成卡片組件，然后通過npm發(fā)布上去給客戶進(jìn)行使用，但是客戶很多項(xiàng)目用到甚至還有移動端，這就需要適配多套樣式，這怎么辦？？？

然后想到使用媒體查詢適配但是媒體查詢是識別視口寬度的用了也不生效啊怎么辦？？？這個(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ì)說了

容器查詢

上述媒體查詢只能識別視口，但使用容器查詢可以更加強(qiáng)大----通過識別父容器的像素變化而變化。

下面看個(gè)簡單的小例子感受一下

上述容器查詢例子，里面兩個(gè)方塊是基于父容器的實(shí)際寬度動態(tài)樣式，而不是媒體查詢那樣視口寬度進(jìn)行動態(tài)樣式，比媒體查詢會更靈活。

容器查詢用法

簡而言之容器查詢使用contain 屬性結(jié)合 @container 規(guī)則實(shí)現(xiàn)，具體語法如下所示。

1、 contain其實(shí)是 container-type和container-name的簡寫，語法格式是格式為container: name / type 把目標(biāo)元素標(biāo)記為容器。

三者的具體屬性如下所示。

一 、container-type 容器具體的類型：

size: 寬度和高度均可以被識別響應(yīng)。

inline-size: 寬度可以被識別響應(yīng)。

block-size: 高度可以被識別響應(yīng)。

二、container-name 具體的查詢標(biāo)識：

直接輸入自定義的名稱，如果多個(gè)用逗號分隔開，例如：container-name: test, test2;

三、container 是簡寫屬性：

語法：container: name / type 例如：container: test / size;

2、@container 的用法跟媒體查詢的@media很相似。

相關(guān)屬性，如下常用屬性可選

min-width 與 max-width：限制容器的寬度觸發(fā)。

min-height 與 max-height：限制容器的高度觸發(fā)。

orientation：識別容器的橫屏或豎屏方向，landscapess橫屏/portraitj豎屏。

aspect-ratio：識別容器的寬高比變化。

這樣使用，例如識別容器的寬高比變化的例子如下

.test {
    container-type: size; // 簡寫容器類型
    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)識別最近的具有 container-type 屬性的容器作為響應(yīng)基準(zhǔn)。

小結(jié)

看完下來你可能會發(fā)現(xiàn)容器查詢非常適合通用組件的封裝，這個(gè)很好理解，就是讓組件樣式能靈活兼容父層級的大小尺寸，這個(gè)是媒體查詢無法做到的。

容器查詢就像給網(wǎng)頁元素裝了個(gè)"監(jiān)聽器"，讓它們能根據(jù)所在容器的大小自動調(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í)慣，但掌握了就會發(fā)現(xiàn)它真香啊，能解決很多實(shí)際開發(fā)中的布局問題。

轉(zhuǎn)自https://juejin.cn/post/7492373338410238002
?