問題場(chǎng)景：

在實(shí)現(xiàn)響應(yīng)式布局的過程中，如何設(shè)置字體大小在不同的視窗尺寸以及不同的移動(dòng)設(shè)備的可讀性?

需要了解的有:

1.px,em,pt之間的換算關(guān)系
1em = 16px
1px  = 1/16 em = 0.0625em

////以下用的比較少//////
1em = 12pt
1px = 3/4 pt = 0.75pt
1pt = 1/12 em 0.0833em
1pt = 4/3 px = 1.3333px

2.任意瀏覽器默認(rèn)字體都是16px。所有未經(jīng)調(diào)整的瀏覽器默認(rèn)尺寸為 1em=16px

3.chrome強(qiáng)制最小字體為12px，即使設(shè)置成10px，最終會(huì)顯示成12px。這點(diǎn)解釋了為什么有時(shí)候在ie或mozllia里的字體大小與chrome有初入

4.px,em,rem vw,vh,vmin的區(qū)別在哪？

px：

相對(duì)單位。相對(duì)于屏幕分辨率。這就是為什么分辨率越大字體越小的原因所在。那px的優(yōu)缺點(diǎn)又如何？

優(yōu)點(diǎn)：比較穩(wěn)定、精確。

缺點(diǎn)：如果對(duì)頁(yè)面進(jìn)行縮放，影響文本可讀性。可通過使用em作為字體單位解決這個(gè)問題。

em：

相對(duì)單位。根據(jù)基準(zhǔn)數(shù)值縮放字體大小，是一個(gè)相對(duì)值，而非具體值。基準(zhǔn)值取決于，父級(jí)元素所設(shè)置的font-size。如果父級(jí)元素未設(shè)置font-size 依次向上尋找直到根節(jié)點(diǎn)。

優(yōu)點(diǎn)：彌補(bǔ)了px的不足

缺點(diǎn)：過于依賴父級(jí)節(jié)點(diǎn)，容易出現(xiàn)字體大小重復(fù)聲明。

rem:

相對(duì)單位。相對(duì)于根結(jié)點(diǎn)html的字體大小。

缺點(diǎn)：避免了em依賴父級(jí)元素字體大小

優(yōu)點(diǎn)：參考系只有一個(gè)，根節(jié)點(diǎn)字體大小

5.為什么根結(jié)點(diǎn)字體大小要設(shè)置成62.5%？

上面介紹過瀏覽器默認(rèn)字體大小為16px，如果想要在不同的頁(yè)面尺寸下設(shè)置字體大小分別為12、14、18px怎么辦？

難道必須使用 12/16 rem,14/16rem,18/16rem 這種方式來計(jì)算字體的相對(duì)大小嗎?

更簡(jiǎn)便的方式，在根結(jié)點(diǎn)設(shè)置字體大小為10px，這樣一來在media里可以直接寫成1.2rem,1.4rem,1.8rem。 根結(jié)點(diǎn)如果設(shè)置成10px，那么相對(duì)于瀏覽器默認(rèn)字體大小為 font-size:10/16 % 即 font-size:62.5%

以上這篇css 字體單位之間的區(qū)分以及字體響應(yīng)式的實(shí)現(xiàn)詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論