浅析 em 和 rem

em 和 rem 都是相对长度单位
em 是相对于父级元素的font-size 大写来定义自身的大小
rem 是相对于根节点（html{}, body{}, :root{}）font-size来定义大小

Talk is cheap, show me the code !(空谈无用，上代码)

em

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>em demotitle>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*
            1. 浏览器默认的字体大小是 16px,所以 1em = 16px
            2. 使用 em 时如果嵌套的子元素过多，而且子元素会继承父元素的 font-size 属性，
               使得的计算起来比较繁琐, 先检查自身有没有 font-size属性，如果有则使用自身的，
            3. 如果没有，则查看父级元素的 font-size值
            4. 因此不推荐使用 em,替代方案是 rem (root element)
            */
            .div {
                width: 20em;
                height: 20em;
                font-size: 20px;
                background-color: skyblue;
                margin: 0 auto;
                margin-top: 15px;
            }
            .div1 {
                /*如果自身没有 font-size这个属性，则使用父级的font-size属性值*/
                width: 15em; 
                height: 15em;
                background-color: lightblue;
            }   
            .div2 {
                /*如果自身有 font-size这个属性，则使用自身的属性值*/
                font-size: 10px;
                width: 10em;
                height: 10em;
                background-color: lightgreen;
            }
            .div3 {
                /*div3 自身没有 font-size属性，则使用父级 div2 的 font-size值*/
                width: 8em;
                height: 8em;
                background-color: lightpink;
            }
        style>
    head>
    <body>
        <div class="div">我是 div
            <div class="div1">我是 div1
                <div class="div2">我是 div2
                    <div class="div3">我是 div3
                    div>
                div>
            div>
        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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

rem

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>rem demotitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 
            :root {
                font-size: 30px;
            }
            html {
                font-size: 50px;
            } 
        */
        /*
            1. 浏览器默认的字体大小是 16px,所以 1rem = 16px
            2. :root{} 就等同于 html{},总之，是根元素
            3. 因此不推荐使用 em,替代方案是 rem (root element)
            4. 1rem = 16px
        */
        html {
            font-size: 20px;
        }
        .div {
            width: 20rem;
            height: 20rem;
            background-color: lightblue;
        }
        .div1 {
            width: 15rem;
            height: 15rem;
            background-color: lightgreen;
        }
        .div2 {
            width: 160px;
            height: 160px;
            font-size: 16px;
            background-color: lightgray;
        }
    style>
head>
<body>
    <div class="div">我是 div 元素div>
    <div class="div1">我是 div1 元素div>
    <div class="div2">我是 div2 元素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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

em和rem

相关阅读:
.NET Core多线 (5) 常见性能问题
live555
tensorflow QAT
如何借助CDC快速实现实时数据传输？
【自然语言处理（NLP）】基于PaddleHub的文本审核
电脑版微信文件存储在哪个文件夹可以找到
消息队列常见问题整理
ARM day9
LeetCode 300. 最长递增子序列
Debezium系列之：采集数据库数据实现对表指定的字段进行加密，下游实现对表加密后的字段进行解密

原文地址：https://blog.csdn.net/qyl_0316/article/details/128193285