問題場景： 在實現響應式佈局的過程中，如何設置字體大小在不同的視窗尺寸以及不同的移動設備的可讀性? 需要瞭解的有: 1.px,em,pt之間的換算關係 1em = 16px 1px = 1/16 em = 0.0625em ////以下用的比較少////// 1em = 12pt 1px = 3/4 ...
問題場景：
在實現響應式佈局的過程中，如何設置字體大小在不同的視窗尺寸以及不同的移動設備的可讀性?
需要瞭解的有:
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依賴父級元素字體大小
優點：參考系只有一個，根節點字體大小
解決方案：
1.通過media query 根據頁面尺寸動態設置
