【CSS】css rem 字体问题

html {font-size: 62.5%;}

body {font-size: 1.4rem;}

这样式设置以后 1rem=10px; 1.4rem=14px;2rem=20px 但是在谷歌浏览器的和模型下是 1rem=12px图片描述

回答：

可参考http://techably.com/chrome-font-size-bug-fix/11996/

和http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag

回答：

因为chrome和其他主流浏览器的最小字体大小默认是12px。

html {font-size: 62.5%;}其实并没有设置成10px

回答：

自己的解决方法，就是有点绕，可以参考：
http://codepen.io/feilong/pen/YPpror

回答：

这个原因就在于，chrome不支持10px字体了啊。

所以，你即便设置了10px的字体，但是谷歌浏览器默默地帮你改成了12px。

解决的办法就是将html的字体大小设置为50px，换算成百分比就是312.5%，美团的触屏h5页面就是这么处理的。

这样算起来就好算多了。

当然，也可以设置成20px，也好算。

用css预编译处理器最好，省的计算了。

回答：

不如给html设置html{font-size:62.5%;font-size:16px;font-size:1rem;}

回答：

最好不要设置为10px或62.5%这样的东西，你最好确保html上设置的字体大小不小于12px

回答：

谷歌浏览器最小字体是12px。
关于字体在移动端的设置，不建议使用rem单位，计算出来的font-size会出现类似23这样的奇数，淘宝采用的方法是根据手机的dpr值，利用媒体查询设置字体大小。具体方法可以查看相关flexible的文章。

回答：

html{font-size:100px;} 把rem都缩小10倍

以上是 【CSS】css rem 字体问题 的全部内容， 来源链接： utcz.com/a/156258.html

回到顶部