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

    手機UC瀏覽器12號字體可行性解決方案，響應式rem針對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字體。

    果然如此里面12號字體是font-size:0.24rem.

    不過我們在想想為什么美團要用50PX字體比例，當初我們用谷歌瀏覽器 可以用-webkit-text-size-adjust:none; 解除最小字體限制早就不管用了。這里又要說谷歌 （我次奧！全是大變態~ `(*∩_∩*)′）。

    變態就在于谷歌webkit不支持10px,所有10px會按照12px來計算，1.2rem是14.4px。所以針對UC瀏覽器這里我們就需要這樣寫。

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淘寶的響應式參考文獻。

    如果有什么不對地方，請各位大牛為小弟指正。