,,

css實現文字大小自適應

admin

2023年8月24日 21:58 本文熱度 1512

在頁面編寫中經常會碰到頁面自適應的問題，也就是頁面內部的元素會隨著窗口的放大縮小而放大縮小，box可以通過calc + 百分比的形式做到頁面自適應，但是box內的字體卻無法做到這點，往往box自適應大小了，內部的字體還是原來的大小，看起來會非常別扭，下面就來css實現一下頁面文字的自適應大小。

clamp()函數

這里主要用到clamp()函數，clamp() 函數的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數：最小值、首選值、最大值。
當首選值比最小值要小時，則使用最小值。
當首選值介于最小值和最大值之間時，用首選值。
當首選值比最大值要大時，則使用最大值。

clamp()的文檔：

我們可以通過在clamp()內設置表達式，來動態的設置文字的大小，比如這里有一個視口，最小320px，最大1200px，當視口小于320px的時候字體大小為0.7rem，當視口大小大于1200px的時候，字體大小為1.2rem，否則就使用區間的首選值。

.clampSize{
    width: 100%; /* 可以動態設置大小 */
    height: 40px;
    margin: 30px;
    line-height: 40px;
    text-align: center;
    border: 1px solid red;
    font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  /* 通過動態計算首選值實現響應式字體變化 */
}

有人說這個值我不知道該設置多大，那么你可以用這個網站：

左邊是你的參數范圍，右邊是你的視口大小，還是非常方便的啦~

實現了這個之后，我們就可以開始著手實現響應式布局的文字大小自適應了，下面案例中，視口最小320px，最大1200px，文字取值最小0.7rem，最大1.2rem，否則取首選值。

<div class="useClamp">
     <div>女裝</div>
     <div>童鞋</div>
     <div>箱包</div>
     <div>首飾掛件</div>
</div>

.useClamp{
    width: 80%; /*容器大小自適應*/
    height: 30px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    direction: ltr;
    background: #eee;
    >div{
        min-width: 60px;
        width: 30%;  /*按鈕大小自適應*/
        height: 30px;
        background: #4d90fe;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 4px;
        margin-inline-end: 10px;
        font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);  /*文字大小自適應，最小0.7rem,最大1.2rem,否則取首選值*/
    }
}

推薦內容

大小的上下限制

min()函數

當我們想要給box設置一個寬度，最小為屏幕的80%，最大為1000px，通常會這么寫：

.box{
width: 80%;
max-width: 1000px;
}

這種寫法可以實現容器的最大和最小的寬度限制，有了min()函數后，可以一句css聲明即可實現。

min() 方法擁有一個或多個逗號分隔符表達式作為參數，表達式的值中最小的值作為參數值。
語法：min(expression [, expression])
其實就是設置最小值為最大值，我們來看一個案例：

.minSize{
    width:min(80%,1000px ); /* 可以動態設置大小,屏幕寬度大于1000px則寬度為1000px(因為1000比80%小),小于1000px則寬度為80%(此時80%比1000小)*/
    height: 40px;
    border: 1px solid red;
}

這里 width:min(100%,1024px );就是說：屏幕寬度大于1000px則寬度為1000px(因為1000比80%小),小于1000px則寬度為80%(此時80%比1000小)。

注意：min()函數參數需要百分比值，如果是固定px值將會失效。

max()函數

max()函數其實和min()函是數一樣的效果，只不過這里取的是最大值為最小值

.maxSize{
    width:max(90%,1024px); /* max()函數和min()函數語法類似，區別在于max()函數返回的
    是最大值，min()函數返回的是最小值。 可以動態設置大小,屏幕寬度90%大于1024px則用90%,若屏幕寬度90%小于1024px則用2014px*/
    height: 40px;
    border: 1px solid red;
    margin-top: 40px;
}

width:max(90%,1024px);的意思是：屏幕寬度90%大于1024px則用90%，若屏幕寬度90%小于1024px則用2014px

該文章在 2023/8/24 22:06:56 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

css實現文字大小自適應

clamp()函數

大小的上下限制

min()函數

max()函數