2.css字体单位
这期简单说说css字体单位
字体单位有三种：px、em、rem
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
| % | 百分比 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| em |
1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 |
| ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 点活字 (1 pc 等于 12 点) |
| px | 像素 (计算机屏幕上的一个点) |
用的比较广泛的是：px ,em ,和rem
px是固定像素，em是相对父元素字体大小的百分比,如果div字体大小是20px，那么div的子节点1em就是20px,2em就是40px。
rem和em差不多，但是rem是相对于html(文档根元素document.documentElement)而不是父元素。
下面用一个非常简短的例子来展现一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width:200px;
height:200px;
font-size: 20px;
border: 2px solid black;
}
.p1{
font-size: 2em;
}
.p2{
font-size:2rem;
}
.p3{
font-size:12px;
}
</style>
</head>
<body>
<div id="div1">
<p class="p1">这是em</p>
<p class="p2">这是rem</p>
<p class="p3">这是px</p>
</div>
</body>
</html>
效果就是下面
这是em
这是rem
这是px
本期就到这里了，😍
