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

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

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

定義和用法

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

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

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

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

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

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

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