.clampSize{

    width: 100%; /* 可以動態(tài)設(shè)置大小 */

    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);  /* 通過動態(tài)計算首選值實現(xiàn)響應(yīng)式字體變化 */

}

<div class="useClamp">

     <div>女裝</div>

     <div>童鞋</div>

     <div>箱包</div>

     <div>首飾掛件</div>

</div>

.useClamp{

    width: 80%; /*容器大小自適應(yīng)*/

    height: 30px;

    padding-left: 10px;

    display: flex;

    align-items: center;

    direction: ltr;

    background: #eee;

    >div{

        min-width: 60px;

        width: 30%;  /*按鈕大小自適應(yīng)*/

        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);  /*文字大小自適應(yīng)，最小0.7rem,最大1.2rem,否則取首選值*/

    }

}

.box{

width: 80%;

max-width: 1000px;

}

.minSize{

    width:min(80%,1000px ); /* 可以動態(tài)設(shè)置大小,屏幕寬度大于1000px則寬度為1000px(因為1000比80%小),小于1000px則寬度為80%(此時80%比1000小)*/

    height: 40px;

    border: 1px solid red;

}

.maxSize{

    width:max(90%,1024px); /* max()函數(shù)和min()函數(shù)語法類似，區(qū)別在于max()函數(shù)返回的

    是最大值，min()函數(shù)返回的是最小值。 可以動態(tài)設(shè)置大小,屏幕寬度90%大于1024px則用90%,若屏幕寬度90%小于1024px則用2014px*/

    height: 40px;

    border: 1px solid red;

    margin-top: 40px;

}