css 字體單位之間的區分和字體響應式的實現

以下為大家帶來一篇css 字體單位之間的區分以及字體響應式的實現詳解。內容還挺不錯的，現在分享給大家，也給大家做個參考。

問題場景：

在實現響應式佈局的過程中，如何設定字體大小在不同的視窗尺寸以及不同的行動裝置的可讀性?

需要了解的有:

#1.px,em,pt之間的換算關係
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.任意瀏覽器預設字體都是16px。所有未調整的瀏覽器預設尺寸為 1em=16px

3.chrome強制最小字體為12px，即使設定為10px，最終會顯示成12px。這點解釋了為什麼有時候在ie或mozllia裡的字體大小與chrome有初入

4.px,em,rem vw,vh,vmin的差異在哪？

px：

相對單位。相對於螢幕解析度。這就是為什麼解析度越大字體越小的原因。那px的優缺點又如何？

優點：比較穩定、精確。

缺點：如果對頁面進行縮放，影響文字可讀性。可透過使用em作為字體單位來解決這個問題。

em：

相對單位。根據基準數值縮放字體大小，是相對值，而非具體值。基準值取決於，父級元素所設定的font-size。如果父級元素未設定font-size 依序向上尋找直到根節點。

優點：彌補了px的不足

缺點：過度依賴父級節點，容易出現字體大小重複宣告。

rem:

相對單位。相對於根結點html的字體大小。

缺點：避免了em依賴父級元素字體大小

優點：參考系只有一個，根節點字體大小

<SPAN style="FONT-SIZE: 16px">html{font-size:100%}    
//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1rem;} }    
@media (min-width:960px) { body {font-size:1.2rem;} }    
@media (min-width:1100px) { body {font-size:1.5rem;} }    
</SPAN>

5.為什麼根結點字體大小要設定成62.5%？

上面介紹過瀏覽器預設字體大小為16px，如果想要在不同的頁面尺寸下設定字體大小分別為12、14、18px怎麼辦？

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

更簡單的方式，在根結點設定字體大小為10px，這樣一來在media裡可以直接寫成1.2rem,1.4rem,1.8rem。根結點如果設定成10px，那麼相對於瀏覽器預設字體大小為font-size:10/16 % 即font-size:62.5%

<SPAN style="FONT-SIZE: 16px">html{font-size:10px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1m=1.2 rem;font-size:12px;  /某些浏览器不支持rem/} }    
@media (min-width:960px)  { body {font-size:1.4 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:1.8 rem; font-size:18px; /*同上*/} }    
</SPAN>

<SPAN style="FONT-SIZE: 16px">html{font-size:16px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:12/16 rem;font-size:12px;  /某些浏览器不支持rem，需要再次使用px 声明font-size/} }    
@media (min-width:960px)  { body {font-size:14/16 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:18/16 rem; font-size:18px; /*同上*/} }    
</SPAN>

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關建議：

使用css強制英文單字斷行的程式碼

css div實作的遮罩層相容IE6-IE9和FireFox瀏覽器

以上是css 字體單位之間的區分和字體響應式的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！