css3 - css rem 字体问题

Question

html {font-size: 62.5%;}
body {font-size: 1.4rem;}
这样式设置以后 1rem=10px; 1.4rem=14px;2rem=20px 但是在谷歌浏览器的和模型下是 1rem=12px

Answer 1

可參考http://techably.com/chrome-font-size-bug-fix/11996/
和http://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag

Answer 2

自己的解決方法，就是有點繞，可以參考：
http://codepen.io/feilong/pen/YPpror

Answer 3

因為chrome和其他主流瀏覽器的最小字體大小默認是12px。
html {font-size: 62.5%;}其實並沒有設置成10px

Answer 4

這個原因就在於，chrome不支持10px字體了啊。
所以，你即便設置了10px的字體，但是穀歌瀏覽器默默地幫你改成了12px。
解決的辦法就是將html的字體大小設置為50px，換算成百分比就是312.5%，美團的觸屏h5頁麵就是這麼處理的。
這樣算起來就好算多了。
當然，也可以設置成20px，也好算。
用css預編譯處理器最好，省的計算了。

Answer 5

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

Answer 6

最好不要設置為10px或62.5%這樣的東西，你最好確保html上設置的字體大小不小於12px

Answer 7

穀歌瀏覽器最小字體是12px。
關於字體在移動端的設置，不建議使用rem單位，計算出來的font-size會出現類似23這樣的奇數，淘寶采用的方法是根據手機的dpr值，利用媒體查詢設置字體大小。具體方法可以查看相關flexible的文章。