問(wèn)題描述

html {font-size: 62.5%;}body {font-size: 1.4rem;}這樣式設(shè)置以后 1rem=10px; 1.4rem=14px;2rem=20px 但是在谷歌瀏覽器的和模型下是 1rem=12px

問(wèn)題解答

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

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

因?yàn)閏hrome和其他主流瀏覽器的最小字體大小默認(rèn)是12px。html {font-size: 62.5%;}其實(shí)并沒有設(shè)置成10px

這個(gè)原因就在于，chrome不支持10px字體了啊。所以，你即便設(shè)置了10px的字體，但是谷歌瀏覽器默默地幫你改成了12px。解決的辦法就是將html的字體大小設(shè)置為50px，換算成百分比就是312.5%，美團(tuán)的觸屏h5頁(yè)面就是這么處理的。這樣算起來(lái)就好算多了。當(dāng)然，也可以設(shè)置成20px，也好算。用css預(yù)編譯處理器最好，省的計(jì)算了。

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

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

谷歌瀏覽器最小字體是12px。關(guān)于字體在移動(dòng)端的設(shè)置，不建議使用rem單位，計(jì)算出來(lái)的font-size會(huì)出現(xiàn)類似23這樣的奇數(shù)，淘寶采用的方法是根據(jù)手機(jī)的dpr值，利用媒體查詢?cè)O(shè)置字體大小。具體方法可以查看相關(guān)flexible的文章。