rem和em的区别

来源：互联网发布：比尔盖茨书单知乎编辑：程序博客网时间：2024/04/26 20:57

一、 rem的特点：

1、rem的大小是根据html根目录下的字体大小进行计算的。

2、当我们改变根目录下的字体大小的时候，下面字体都改变。

3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。

二、em的特点：

三、代码部分

1、rem的代码。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>rem</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        html{            font-size:12px;        }        .outer{            font-size:3rem;            background:red;            width:400px;            height:400px;            position: relative;        }        .middle{            font-size:2rem;            background: aqua;            width:200px;            height: 200px;            position: absolute;            left:100px;            top:100px;        }        .inner{            font-size:1rem;            background: palegreen;            width:100px;            height:100px;            position: absolute;            left:50px;            top:50px;        }    </style></head><body><div class="outer">    外部    <div class="middle">        中间        <div class="inner">内部</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

rem结果如下：
这里写图片描述

1、em的代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>rem</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        html{            font-size:12px;        }        .outer{            font-size:3em;            background:red;            width:800px;            height:800px;            position: relative;        }        .middle{            font-size:2em;            background: aqua;            width:400px;            height: 400px;            position: absolute;            left:200px;            top:200px;        }        .inner{            font-size:1em;            background: palegreen;            width:200px;            height:200px;            position: absolute;            left:100px;            top:100px;        }    </style></head><body><div class="outer">    外部    <div class="middle">        中间        <div class="inner">内部</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

em的结果如下:
这里写图片描述

阅读全文

0 0

rem和em的区别

一、 rem的特点：

1、rem的大小是根据html根目录下的字体大小进行计算的。

2、当我们改变根目录下的字体大小的时候，下面字体都改变。

3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。

二、em的特点：

1、字体大小是根据父元素字体大小设置的。

三、代码部分

1、rem的代码。

1、em的代码