我将为大家介绍3种字体单位，分别是px,em和rem。首先我先为大家大致介绍一下，一般初学者使用字体单位px较多，1px该多大就多大是一个固定值,也就是px是一个绝对字体单位。而em和rem是相对字体单位，虽然em和rem是相对字体单位但是它们又有所不同，em是相对于它的父级字体大小，rem是相对于html的字体大小。现在大家肯定还不是很明白，接下来我将用一段代码向大家展示。
1.首先为大家介绍的是px字体单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
font-size:80px;
}
</style>
</head> <body>
<div class = "box">
<div class = "div1">你好</div>
<div class = "div2">真是的</div>
</div>
</body>
</html>
运行结果：
现在我们对现在的结果进行分析：我们现在只对box设置了字体的大小，box是div1和div2的父级，如果没有再对div1和div2设置字体大小的话，那么div1和div2将继承它们父级的字体大小都是80px；
如果给div1和div2本身具体设置字体大小，那么它们运行的结果不会再继续跟随父级。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
font-size:80px;
}
.div1{
font-size:20px;
}
.div2{
font-size:25px;
}
</style>
</head>
<body>
<div class = "box">
<div class = "div1">你好</div>
<div class = "div1">真是的</div>
</div>
</body>
</html>
运行结果：
你好
真是的
可以看到div1的字体大小已经变成了20px,div2的字体大小已经变成了25px;而跟它们父级的80px没有一点关系。
2.rem（父级字体的大小仍采用一开始的案例）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
font-size:80px;
}
</style>
</head>
<body>
<div class = "box">
<div class = "div3">你好</div>
<div class = "div4">真是的</div>
</div>
</body>
</html>
运行结果：
现在给div3和div4设置字体大小：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
font-size:80px;
}
.div3{
font-size:2em;
}
.div4{
font-size:1em;
}
</style>
</head>
<body>
<div class = "box">
<div class = "div3">你好</div>
<div class = "div4">真是的</div>
</div>
</body>
</html>
再次运行，观察结果：
你好
真是的
可以看到此时div4的字体大小和一开始没有设置的时候一样大也就是在这次的代码中说1em = 80px;而div3的字体大小是80px的两倍也就是说2em = 2*80px;如果我将box的字体大小改为60px,那么1em = 60px;也就是说em s是相对于父级的字体单位。
3.最后要为大家介绍的是rem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html{
font-size:30px;
}
.box1{
font-size:60px;
}
</style>
</head>
<body>
<div class = "box1">
<div class = "div5">你好</div>
<div class = "div6">真是的</div>
</div>
</body>
</html>
运行结果：此时div5和div6的字体大小都是60px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html{
font-size:30px;
}
.box1{
font-size:60px;
}
.div5{
font-size:1.2rem;
}
.div6{
font-size:2rem;
}
</style>
</head>
<body>
<div class = "box1">
<div class = "div5">你好</div>
<div class = "div6">真是的</div>
</div>
</body>
</html>
运行结果：
此时你好的字体大小是36px,div6的字体大小是60px;也就是说1.2rem = 1.2*30px;2em = 2*30px;而跟父级的字体大小没有关系，如果html的字体大小变为45px,那么1px = 45px;也就是说rem是相对于html的字体单位。