【前端基础知识】px、em和rem的使用和区别_px em

作者：Cpp五条 | 2024-02-10 14:39:54

踩

px em

px、em和rem的使用和区别

一、px
二、em
三、rem
四、px 与 rem 的选择？

一、px

px像素（Pixel）是相对长度单位。相对于显示器屏幕分辨率而言的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>px、em和rem的使用</title>
    <style>
        .div1 {
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

电脑分辨率时的效果，width和height都为150px。
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sEu3ZrAP-1640275410040)(C:\Users\25218\AppData\Roaming\Typora\typora-user-images\image-20211223222620294.png)]$

手机分辨率时的效果，width和height都为150px。

二、em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。子元素会继承父级元素的字体大小。

例：如果当前元素没有定义font-size，那该元素会继承父元素的font-size，如果父元素的font-size为16px，那么当前元素的font-zise也就为16px。em是相对于自身的font-size，如果当前元素的font-size为16px，width为10em，那么也就是width为160px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>px、em和rem的使用</title>
    <style>
        /* 不同浏览器默认的font-size不同 */
        html {
            font-size: 16px;
        }

        .div1 {
            /* 15em => 15*16px=240px */
            width: 15em;
            height: 15em;
            background-color: antiquewhite;
        }

        .div2 {
            /* 10em => 10*24px=240px */
            font-size: 24px;
            width: 10em;
            height: 10em;
            background-color: rgb(197, 115, 8);
        }
    </style>
</head>

<body>
    <div class="div1">15em = 15 * 自身元素的font-size(16px) = 240px</div>
    <div class="div2">10em = 10 * 自身元素的font-size(24px) = 240px</div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

两个盒子的大小相同，虽然一个是15em，另一个是10em，但是由于自身元素的font-size不同，所以出现了相同的计算结果。
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpeHbaE8-1640275410042)(C:\Users\25218\AppData\Roaming\Typora\typora-user-images\image-20211223235624682.png)]$

三、rem

rem是CSS3新增的一个相对单位（root em，根em），它是相对于根（浏览器）字体的。注意：不同浏览器默认的font-size值不同。

例：如果浏览器字体为12px，那么10rem=120px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>px、em和rem的使用</title>
    <style>
        /* 不同浏览器默认的font-size不同 */
        html {
            font-size: 16px;
        }

        .div1 {
            /* 15rem => 15*16px=240px */
            width: 15rem;
            height: 15rem;
            background-color: antiquewhite;
        }

        .div2 {
            /* 10rem => 10*16px=160px */
            font-size: 24px;
            width: 10rem;
            height: 10rem;
            background-color: rgb(197, 115, 8);
        }
    </style>
</head>

<body>
    <div class="div1">15rem = 15 * 自身元素的font-size(16px) = 240px</div>
    <div class="div2">10rem = 10 * 自身元素的font-size(16px) = 160px</div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

两个盒子的大小不相同，虽然一个是15rem，另一个是10rem，但是由于rem的参照是根元素（也就是浏览器）的font-size，所以出现了不相同的计算结果。

四、px 与 rem 的选择？

1、对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

2、对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

以上就是px、em和rem的使用和区别。
我是前端Dai，一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder，希望大家一起进步，加油。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/74571