响应式rem针对UC浏览器12号字体可行性解决方案

发布时间:2020-08-02 22:47:22 作者:xcat520000
来源:网络 阅读:1270


    手机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号!


响应式rem针对UC浏览器12号字体可行性解决方案

 

    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号字体我看了下,如图。

   

响应式rem针对UC浏览器12号字体可行性解决方案

    写的是html{font-size:312.5%} 计算 3.125*16=50 px字体,font-size:312.5% 美团根字体 50px,那么 12号字体就是 12/50=0.24rem 所以美团页面用的是 0.24rem 字体 表示12px字体。

响应式rem针对UC浏览器12号字体可行性解决方案


    果然如此里面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淘宝的响应式参考文献。

    如果有什么不对地方,请各位大牛为小弟指正。



推荐阅读:
  1. CSS3的REM设置字体大小
  2. web app响应式字体设置!rem之我见

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

uc浏览器 手机12号字体显示

上一篇:01.Java基础问题

下一篇:jquery扩展date日期格式化显示

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》