亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

到目前為止，除了使用 Javascript 之外，使用純 CSS 也是可以的。

Demo 地址：Just a moment...

上面錄屏的效果就是文字大小隨著容器的大小變化的。實(shí)現(xiàn)視頻中的效果使用的是 CSS 的新特性，容器查詢 ，并且使用了 CSS 新增的容器單位。

先來(lái)看如何實(shí)現(xiàn)的吧：

<div class="container">
    <div class="box">右下角拖動(dòng)我，可以根據(jù)容器寬度改變字號(hào)</div>
</div>

關(guān)鍵的 CSS 代碼：

.container {container-type: inline-size;}
.box {font-size: 5cqw;}

CSS 容器查詢是什么，這里就不詳細(xì)闡述了，感興趣的話，你可以移步閱讀相關(guān)教程：

• 下一代響應(yīng)式 Web 設(shè)計(jì)：容器查詢

• 初探CSS容器查詢_CSS, 容器查詢, @container, contain, 會(huì)員專欄, Responsive 教程_W3cplus

• https://www.w3cplus.com/css/container-queries-with-container-and-at-container.html

• 容器查詢給設(shè)計(jì)帶來(lái)的變化_CSS, 容器查詢, Responsive, Layout, 會(huì)員專欄 教程_W3cplus

這里簡(jiǎn)單說(shuō)一下容器查詢單位。

容器查詢單位的工作原理和視窗單位，比如vw、vh、vmin、vmax等非常相似。不同的是，視窗單位是相對(duì)于瀏覽器視窗尺寸計(jì)算；容器查詢單位是相對(duì)于查詢?nèi)萜鞒叽缬?jì)算：

• 1cqw 等于查詢?nèi)萜鲗挾龋?code style="user-select: text !important; background-color: rgb(246, 246, 246); border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.9em; margin: 0px 2px; padding: 3px 4px;">width）的 1%；

• 1cqh 等于查詢?nèi)萜鞲叨龋?code style="user-select: text !important; background-color: rgb(246, 246, 246); border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 0.9em; margin: 0px 2px; padding: 3px 4px;">height）的 1%；

• 1cqi 等于查詢?nèi)萜鲀?nèi)聯(lián)大小（inline-size）的 1%；

• 1cqb 等于查詢?nèi)萜?span style="user-select: text !important;">塊大小（block-size）的 1%；

• 1cqmin 等于 1cqi 或 1cqb 中較小的一個(gè)值；

• 1cqmax 等于 1cqi 或 1cqb 中較大的一個(gè)值。

容器查詢單位出現(xiàn)之后，可以幫助我們?cè)谔幚斫M件內(nèi)元素樣式，比如 font-size、 padding 和 margin 等，節(jié)省很多的精力和時(shí)間。例如，我們可以使用容器查詢單位代替手動(dòng)增加字體大小。

容器查詢單位還沒有的時(shí)候，我們一般會(huì)像下面這樣改寫卡片組件標(biāo)題的 font-size ：

.card__title {
    font-size: 1rem;
}
/* 容器寬度大于 400px */
@container (width > 400px) {
    .card__title {
        font-size: 1.15rem;
    }
}
/* 容器寬度大于 600px */
@container (width > 600px) {
    .card__title {
        font-size: 1.25rem;
    }
}
/* 容器寬度大于 800px */
@container (width > 800px){
    .card__title {
        font-size: 2rem;
    }
}

有了容器查詢單位之后，同樣是給卡片組件標(biāo)題設(shè)置 font-size ，只需要一行代碼即可：

.card__title {
    font-size: clamp(1rem, 3cqw, 2rem);
}

當(dāng)然，我們也可以像前面課程中介紹 vw 設(shè)置 font-size 的方法一樣，使用容器查詢單位來(lái)給卡片組件標(biāo)題設(shè)置font-size：

/* 視窗單位設(shè)置 font-size */
.card__title {
    font-size: clamp(1.2rem, 5vw + 1rem, 3rem);
}
/* 容器查詢單位設(shè)置 font-size */
.card__title {
    font-size: clamp(1.2rem, 5cqi + 1rem, 3rem);
}

注意，早期的容器查詢單位原型是 q* 而不是現(xiàn)在的 cq* ，所以可能會(huì)在早期的一些容器查詢單位的 Demo 中看到類似 qw 、qh 單位，而且很有可能不能正常運(yùn)行。

就如上圖中所示，你還可以將 CSS 的比較函數(shù) clamp() 結(jié)合起來(lái)使用。讓你的字號(hào)可以有一個(gè)更好的設(shè)置。

.box {font-size: clamp(.8rem, 10cqw + .8rem, 2.5rem);}

00:09

Demo 地址：Just a moment...

將 clamp() 和容器查詢單位結(jié)合 在一起之后，.box 的 font-size 最小不會(huì)小于 0.8rem ，最大不會(huì)大于 2.5rem ，而且還可以隨著容器的尺寸動(dòng)態(tài)調(diào)整 font-size 。

是不是很有意思。如果你從未接觸過(guò) CSS 的比較函數(shù)，可以移步閱讀：