响应式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淘宝的响应式参考文献。