px、em、rem的区别

最新推荐文章于 2025-01-14 16:29:06 发布

原创最新推荐文章于 2025-01-14 16:29:06 发布 · 351 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#px、em、rem的使用区别

前端&移动开发专栏收录该内容

22 篇文章

订阅专栏

px、em、rem的区别

1、px

是网页布局的相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

使用px设置的尺寸在不同的显示屏中尺寸不同，跟像素密度有关系；如果缩放会有所影响

px特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

2、em

是一种相对长度单位，参照当前元素的字号，如果没有设置，
就参照父容器或者当前浏览器的默认的字号；盒子尺寸因父盒子改变而改变的

em特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

3、rem

是css3新增的一种相对长度单位，但只参照根元素html的字号
(需申明html{font-size：值；})；
盒子尺寸因父盒子改变或者字号改变而不可变，只针对html改变，
相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身

<body>
    <!-- px相对长度单位，是参照显示器屏幕分辨率而言的 -->
    <div class="px">
        使用px设置的尺寸在不同的显示屏中尺寸不同，跟像素密度有关系； 如果缩放会有所影响
    </div>
    <!-- em默认根据根标签html的字号来改变 -->
    <div class="box">
        rem是参考根标签html的字号来改变
    </div>
    <div class="box1">
        em是参考当前的字号，如果没设置，参考父级元素或浏览器的字号
        <p>注：web的字号最小是12px，所以不能设置字号为小于12px</p>
    </div>
    <!-- em自定义设置 -->
    <div class="box2">
        rem是参考根标签html的字号来改变

    </div>
</body>

<style>
        html {
            font-size: 12px;
        }
        body {
            margin: 10px 50px;
        }
        .px {
            width: 100px;
            height: 100px;
            background-color: #fcf;
            margin-top: 10px;
        }
        .box {
            width: 10rem;
            height: 10rem;
            background-color: #ccc;
            /* 当前字体不会改变尺寸 */
            font-size: 20px;
            margin-top: 10px;
        }
        .box1 {
            width: 10em;
            height: 10em;
            background-color: #f40;
            font-size: 15px;
            margin-top: 10px;
        }
        .box2 {
            font-size: 5rem;
            background-color: #acd;
        }
    </style>