響應式rem針對UC瀏覽器12號字體可行性解決方案

手機UC瀏覽器12號字體可行性解決方案

今天上班測試手機專題時候發現，UC瀏覽器去瀏覽到手機頁面12號字體放大到16號字體大小，始終是改變我所寫的樣式爲12號字體大小，可是蘋果 saf 瀏覽器  還有小米自帶瀏覽器或者國產手機都能正常顯示12號字體，這個UC變態啊~~

後來web羣裏有個同仁說美團移動端用的也是12px字體，瞅了眼，其實美團移動用的並不是是12px而是rem字體。

那麼,什麼是rem字體？rem字體何處使用？爲此我也查閱了下資料

「rem」是指根元素（root element，html）的字體大小，從遙遠的 IE6 到版本帝 Chrome 他們都約好了，根元素默認的 font-size 都是 16px。（因此UC上爲何12號字體會變成16號而不變成18號！）

IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可使用 rem。

針對UC瀏覽器這個變態，咱們要秉承 響應式 【內容優先，移動優先】的原則！網頁中經常使用的文字大小單位是 px(Pixels)，rem始終是基於根元素（html）.

先前咱們知道 根元素默認的 font-size 都是 16px,也就是UC瀏覽器默認根元素也是16，那麼咱們用rem改變頁面根元素大小。

html{font-size:62.5%; /* 10÷16=62.5% */} 咱們設置html根元素大小表示爲62.5%  其實就是網頁的10px，那麼咱們設置12號字體，body{font-size:1.2rem ; /* 12÷10=1.2 */} 那麼12號字體使用就是1.2rem。那麼14號字體就是1.4rem，而後UC瀏覽器測試果然12號字體正常顯示了，不過事情還沒完。

羣裏兄弟說的美團移動版用的12號字體我看了下，如圖。

寫的是html{font-size:312.5%} 計算 3.125*16=50 px字體，font-size:312.5% 美團 根字體  50px，那麼 12號字體就是 12/50=0.24rem 因此美團頁面用的是 0.24rem 字體 表示12px字體。

果真如此裏面字體是font-size:0.24rem.

不過咱們在想一想爲何美團要用50PX字體比例，當初咱們用谷歌瀏覽器 能夠用-webkit-text-size-adjust:none; 解除最小字體限制早就無論用了。這裏又要說谷歌 （我次奧！全是大變態~ `(*∩_∩*)′）。

變態就在於谷歌webkit不支持10px,全部10px會按照12px來計算，1.2rem是14.4px。因此這裏咱們就須要這樣寫。

html{

font-size:62.5%; /* 10÷16=62.5% */

}

body{

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */

}

p{

font-size:14px;

font-size:1.4rem;

}

爲了兼容不支持 rem 的瀏覽器，咱們須要在 rem 前面寫上對應的 px 值，這樣不支持的瀏覽器能夠優雅降級。其實不用太糾結是默認的 font-size:100%，仍是設置爲 font-size:62.5%，若是你引入 了 CSS 預處理工具那麼天然可使用默認值，若是因爲其餘緣由使用 font-size:62.5% 也無可厚非，徹底能夠在 body 中重置回你須要的默認 font-size。

OK這樣就解決了。爲了搞這個UC12號字體問題沒想到搞出這麼多名堂，感謝似水流年給的建議，感謝UED淘寶的響應式參考文獻。