溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html自適應(yīng)網(wǎng)頁里字體大小自適應(yīng)屏幕的方法

發(fā)布時間：2020-11-20 16:40:22 來源：億速云 閱讀：1478 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了html自適應(yīng)網(wǎng)頁里字體大小自適應(yīng)屏幕的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

字體大小使用 em, rem 作為單位，然后使用 media query 來調(diào)整 html 元素的 font-size

自適應(yīng)網(wǎng)站

html {font-size: 62.5%!important; /* 10÷16=62.5% */}
@media only screen and (min-width: 481px){
    html {
        font-size: 94%!important; /* 15.04÷16=94% */
    }
}
@media only screen and (min-width: 561px){
    html {
        font-size: 109%!important; /* 17.44÷16=109% */
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
}

app

@media only screen and (min-width: 320px){html {font-size: 62.5%!important;}}
@media only screen and (min-width: 360px){html {font-size: 72.5%!important;}}
@media only screen and (min-width: 400px){html {font-size: 82.5%!important;}}
@media only screen and (min-width: 480px){html {font-size: 94%!important;}}

感謝你能夠認真閱讀完這篇文章，希望小編分享html自適應(yīng)網(wǎng)頁里字體大小自適應(yīng)屏幕的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手