概念

px、em、rem都是計量單位，都能表示尺寸，但是有所不同，其各有各的優缺點

px

px像素（Pixel），像素px是相對于顯示幕螢屏解析度而言的
px作為單位是固定不變的，不能適應瀏覽器縮放時產生的變化，因此一般不用于回應式網站，

em

em的值不固定，會繼承父元素的字體大小，是一個相對單位

rem

rem是css3中新增的相對單位，相對于html根元素
可以通過修改根元素字體大小就可以調整所有字體大小
可以避免字體大小逐層復合的連鎖反應

注意：任意瀏覽器的默認字體都是16px

區別

通過上述概念介紹可以看出區別如下：

px相對其他兩個單位是固定不變的，不能適應瀏覽器縮放時產生的變化
em是根據父元素繼承相應大小而不是固定的，rem是繼承html根元素的大小

下面通過代碼演示一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .em{
                width: 10em;
                height: 10em;
                background-color: red;
            }
            .rem{
                width: 10rem;
                height: 10rem;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="em"></div>
            <div class="rem"></div>
        </div>
    </body>
</html>

運行效果如下：

因為父盒子box沒有設定字體大小，即自動繼承html根元素，默認字體大小為16px，所以兩個子元素盒子都是：16 * 10 = 160

下面給box父盒子設定一個自己的字體大小：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .em{
                width: 10em;
                height: 10em;
                background-color: red;
            }
            .rem{
                width: 10rem;
                height: 10rem;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box" style="font-size: 8px;">
            <div class="em">em</div>
            <div class="rem">rem</div>
        </div>
    </body>
</html>

運行效果：

這里將父盒子box設定了font-size:8px ，所以em盒子就相對父盒子box的字體大小為：8 * 10 = 80 ，而rem盒子還是相對html根元素字體大小為：16 * 10 = 160

這就是em和rem兩個計量單位的區別，個人感徑訓是rem更香，修改根元素字體大小就能更改回應所有字體大小，而em存在字體大小逐層復合的連鎖反應，所以用rem作為單位可以更好地適配移動端開發

本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15783997.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413085.html

標籤：其他

上一篇：Three.js 實作虎年春節3D創意頁面

下一篇：rem自適應移動端布局

px、em、rem三者的區別

概念

px

em

rem

區別