移動端em與rem區別

時間 2019-11-12

標籤移動 rem 區別欄目無線简体版

原文原文鏈接

rem與em都是相對單位，咱們使用它們的目的就是爲了適應各類手機屏幕。html

rem是根據html根節點來計算的，而em是繼承父元素的字體。好比下面一個demoiphone

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Test REM</title>
<style>
    html{
        font-size: 40px;
    }
    body{
        font-size: 20px;
    }
    .use_em,.use_rem{
        font-size: 14px;
    }
    .use_em span{
        font-size: 1em;
    }
    .use_rem span{
        font-size: 1rem;
    }

    .img_em{
        width: 2em;
        height: 2em;
    }
    .img_rem{
        width: 2rem;
        height: 2rem;
    }

</style>
</head>
<body>

<div class="use_em">
    <span>font-size使用em</span>
</div>

<div class="use_rem">
    <span>font-size使用rem</span>
</div>

<p>圖片使用em</p>
<img src="../images/face01.jpg" class="img_em">
<p>圖片使用rem</p>
<img src="../images/face02.jpg" class="img_rem">

</body>
</html>

第一個span繼承了它的父元素div的大小，因此是14px,第二個span是經過html來計算的，因此是40px。第一個img繼承的body，第二個img根據html來計算。經過這個簡單的例子咱們得知上面的結論是正確的。因此咱們能夠經過下面這種比例來對不一樣的手機屏幕作適配。佈局

好比iphone5上的rem基值爲32px，則渲染一張64*64px的div，則用2rem*2rem渲染，換算公式以下————字體

px/rem = 基值網站

對於一些固定的元素，咱們不推薦使用rem，而改成使用px去確保在同一屏幕上保持一致，好比字體font-size，這個更趨向於閱讀的實用性，不適合排版佈局。spa

em 單位轉爲像素值，取決於他們使用的字體大小。此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。scala

若是p元素有相應的px的話，他會根據自身條件來計算，不然會繼承父元素的px。就是說若是我給p元素去掉font-size，那他的padding是32px,就是說咱們在使用em時必需要正確管理各個元素。因此我的推薦rem更適合於移動端，它給咱們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，再也不是使用固定的 px 單位。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。