css 字型單位之間的區分以及字型響應式實現，css字型

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依賴父級元素字型大小

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

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;} }

 

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

 

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

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; /*同上*/} }

 

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

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

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; /*同上*/} }

　　

 

參考內容：

響應式設計：使用響應式字型 http://www.w3cplus.com/responsive/understanding-responsive-web-design-how-to-manage-fonts.html

響應式十日談：第一日 http://ued.taobao.org/blog/2013/05/rem-font-size/

關於字型大小適配：px rem em的組合使用 http://suqing.iteye.com/blog/2042739

Use legible font sizes https://varvy.com/mobile/legible-font-size.html

Responsive Font Size  http://stackoverflow.com/questions/15649244/responsive-font-size

Viewport Sized Typography https://css-tricks.com/viewport-sized-typography/

Responsive Font Size with CSS  http://codeitdown.com/responsive-font-size-css/

Responsive typography with REMs: How to build a scalable typographic foundation in three steps  http://blog.bugsnag.com/responsive-typography-with-rems

css font-size:em、px、rem 換算