狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

實現文字大小隨容器大小變化,除了 css 計算還有什么直接實現的屬性值?

admin
2023年8月25日 0:21 本文熱度 677

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


Demo 地址:Just a moment...

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


先來看如何實現的吧:


<div class="container">
    <div class="box">右下角拖動我,可以根據容器寬度改變字號</div>
</div>


關鍵的 CSS 代碼:


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


CSS 容器查詢是什么,這里就不詳細闡述了,感興趣的話,你可以移步閱讀相關教程:



這里簡單說一下容器查詢單位。


容器查詢單位的工作原理和視窗單位,比如vwvhvminvmax等非常相似。不同的是,視窗單位是相對于瀏覽器視窗尺寸計算;容器查詢單位是相對于查詢容器尺寸計算


  • 1cqw 等于查詢容器寬度(width)的 1%

  • 1cqh 等于查詢容器高度(height)的 1%

  • 1cqi 等于查詢容器內聯大小(inline-size)的 1%

  • 1cqb 等于查詢容器塊大小block-size)的 1%

  • 1cqmin 等于 1cqi 或 1cqb 中較小的一個值;

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

容器查詢單位出現之后,可以幫助我們在處理組件內元素樣式,比如 font-size、 padding 和 margin 等,節省很多的精力和時間。例如,我們可以使用容器查詢單位代替手動增加字體大小。


容器查詢單位還沒有的時候,我們一般會像下面這樣改寫卡片組件標題的 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;
    }
}

有了容器查詢單位之后,同樣是給卡片組件標題設置 font-size ,只需要一行代碼即可:

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

當然,我們也可以像前面課程中介紹 vw 設置 font-size 的方法一樣,使用容器查詢單位來給卡片組件標題設置font-size

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



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


就如上圖中所示,你還可以將 CSS 的比較函數 clamp() 結合起來使用。讓你的字號可以有一個更好的設置。


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


Demo 地址:Just a moment...


將 clamp() 和容器查詢單位結合 在一起之后,.box 的 font-size 最小不會小于 0.8rem ,最大不會大于 2.5rem ,而且還可以隨著容器的尺寸動態調整 font-size 。


是不是很有意思。如果你從未接觸過 CSS 的比較函數,可以移步閱讀:



該文章在 2023/8/25 0:21:35 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved