CSS3單位rem的用法和bug的解決辦法?PC端大部份是用px單位，小部分用em單位，而移動端，請全部用rem單位吧目前大部份設備，包括但不限于iOS 5 、Android 2.3 、Window Phone 8 都是可以兼容的，具體兼容表請看caniuse，我來為大家科普一下關于CSS3單位rem的用法和bug的解決辦法?下面希望有你要的答案，我們一起來看看吧!

CSS3單位rem的用法和bug的解決辦法

PC端大部份是用px單位，小部分用em單位，而移動端，請全部用rem單位吧。目前大部份設備，包括但不限于iOS 5 、Android 2.3 、Window Phone 8 都是可以兼容的，具體兼容表請看caniuse。

rem是什麼意思呢？CSS手冊上的說明：相對長度單位，相對于根元素（即html元素）font-size計算值的倍數。

rem用法很簡單，就是根标簽html設置文字大小後（不設置的話，大部份浏覽器默認為16px），其他标簽設置rem都是html大小的倍數。

html{ font-size: 10px; /* 設置html為10px */}h1{ font-size: 2rem; /* 10px*2=20px */}

那為什麼移動端要使用em作為單位？一是我開始提到的，移動端大部份都支持，不需要考慮兼容問題；二是修改起來靈活。如果你要整個網頁字體都變大兩倍，直接修改html{font-size:20px}即可。當然還有人提到适合網頁縮放，我從未用過這個功能。。。

你肯定會說，百度Google搜出來的文章，大部份是讓設置為html{font-size:62.5%}。他的作用也是把html設置成10px，但萬一哪個浏覽器2b升級成默認文字大小不是16px怎麼辦？而且可以直接設置成10px，為什麼要去用62.5%算成10px？這不是脫褲子放屁嗎？所以我都是直接設置10px。

如果隻介紹這點東西，網上一搜一大堆，我也就不會寫這篇文章了。關鍵是大規模使用中遇到bug了，而且是蛋疼的原生Chrome。。。iOS平台的Chrome沒問題，據說iOS裡的所有浏覽器都是殼。。。

bug 1：例如reset裡并沒有設置網站文字字号，所以我會在body裡直接寫font-size:1.2rem，讓整個網頁字号為12px。但在Android的Chrome裡無效，還是按照16px來計算而不是我手動設置10px計算。所以要想給整個網頁設置默認字号，最粗暴的辦法就是直接在body裡設置em或者px字号，例如body{font-size:1.2em}或者12px，推薦em。body直接繼承html的字号，可以間接實現rem的功能。然後其他地方用rem是沒問題的。

bug 2：因為Chrome設置了最小字号為12px，導緻如果在寬高、行高、邊距等地方用rem，雖然在html那設置了10px，但默認還是會按照12px來計算，所以實際會偏大。建議rem隻是在字号上用比較好。

轉載自西門的後花園

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!