那些年被"62.5%"欺騙過的rem

時間 2019-11-08

標籤那些年 62.5% 欺騙 rem 简体版

原文原文鏈接

前言
有過移動端開發經驗的人都知道，ios跟android頁面的 像素(px)密度 不同。這就有點尷尬了，由於在android這邊一個div 180px剛恰好，可是去了ios那邊可能就不同了，可能會形成頁面變得扭曲。
爲了解決這個問題，救星——rem出現了。它的值默認是1rem == 16px,這樣子的話計算起來就不是很方便了。因此不少人喜歡把它設置成1rem == 10px。10/16就是 0.625。咱們的主角出現了！html

怎麼設置rem
不少人知道在根節點設置，也就是 html{font-size:62.5%;} 就能夠了。我不知道是誰一開始就這麼說的。但我知道這我的也太不負責任了。爲何呢？由於谷歌只容許font-size最小是12px.android

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title>測試rem</title> 
      <style>
        html{font-size: 62.5%;}
        .px{width: 100px;height: 10px;background-color: red;}
        .rem{width: 10rem;height: 10px;background-color: blue;}
      </style>  
</head>
<body>
    <div class="px"></div>
    <div class="rem"></div>
</body>
</html>

按網上那些人的道理，兩個div本應該同樣寬的。可是呢，現實是這個樣子的......（實際上你用谷歌是跟下圖，但用萬惡的IE打開是藍色比較短，火狐是同樣長。）各個瀏覽器還不同，這非常尬尷啊！
ios