一行代碼搞定 font-size 響應(yīng)式

發(fā)布時間：2023-05-09 15:23:55 作者：Aoba_xu

這篇文章主要介紹了一行代碼搞定 font-size 響應(yīng)式,該屬性設(shè)置元素的字體大小,font-size 屬性可設(shè)置字體的尺寸,本文給大家介紹的非常詳細，需要的朋友可以參考下

定義和用法

font-size 屬性可設(shè)置字體的尺寸。

該屬性設(shè)置元素的字體大小。注意，實際上它設(shè)置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮（通常會矮）。

各關(guān)鍵字對應(yīng)的字體必須比一個最小關(guān)鍵字相應(yīng)字體要高，并且要小于下一個最大關(guān)鍵字對應(yīng)的字體。

公司要做大屏，但是大屏還要有個嵌在系統(tǒng)的版本，屏幕（iframe）小了但字體大了怎么辦。網(wǎng)上找了很多代碼都很長，個人參考了資料后實現(xiàn)了一個一行代碼 font-size 響應(yīng)式。

html {
    font-size: clamp(12px, calc(7px + 0.390625vw), 24px);
}

在 <html> 標簽中定義是為了定義全局字體基準大小，目前開發(fā)幾乎所有的字體都用 rem 作為單位，而 rem 單位代表的是全局字體大小的多少倍，所以只要設(shè)置全局大小整個頁面所有 rem 都會跟著相應(yīng)。
clamp 三個參數(shù)分別是最小值、相對值和最大值，如果相對值小于最小值則返回最小值，如果相對值在最大值最小值之間則返回相對值，如果相對值大于最大值則返回最大值。這樣就限定了可縮放大小的范圍。
calc(7px + 0.390625vw) 則代表自起始值開始，根據(jù)屏幕變化量增加像素數(shù)，0.390625vw 的公式是 (最大屏幕字體大小-最小屏幕字體大小)/(最大屏幕寬度-最小屏幕寬度) * 100，當然不乘 100 可以使用 0.00390625%

到此這篇關(guān)于一行代碼搞定 font-size 響應(yīng)式的文章就介紹到這了,更多相關(guān)font-size 響應(yīng)式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！