CSS 字体单位之间的区分以及字体响应式的实现详解
1. em、rem和px之间的区别
在CSS中，常见的字体单位有px、em和rem。这些单位各有优缺点，我们需要根据具体的应用场景来选择单位。
1. px（像素）：是最常用的单位，它是固定的单位，值不随元素的宽高而变化。
2. em：相对单位，其值是相对于所在父元素的字体大小确定的。如果父元素的字体大小发生变化，那么所有使用em作为字体大小的子元素也会跟着变化。
3. rem：相对单位，其值是相对于根元素的字体大小确定的。如果根元素的字体大小发生变化，那么所有使用rem作为字体大小的元素也会跟着变化。
值得注意的是，rem相对于em的优点在于其不会因为嵌套元素的字体大小继承而导致字体大小的不确定性。同时也不会因为变化因素多而造成字体大小的混乱。
2. 响应式字体的实现
在移动端显示网页，经常会遇到字体大小跟不上屏幕大小的情况，这时候就需要我们实现字体的响应式调整。通过CSS媒体查询和动态脚本等方式实现字体的响应式适应。
2.1 媒体查询
媒体查询是CSS3中定义的一种特殊格式的定制样式，它允许我们根据不同设备的屏幕宽度、高度、分辨率、方向等参数来应用不同的样式。其中最常见的就是在响应式布局中使用的。
下面我们来看一个例子，实现当屏幕宽度小于等于1024时调整字体的大小。
@media screen and (max-width: 1024px) {
body {
font-size: 14px;
}
}
如上代码中，通过媒体查询确定了屏幕宽度是否要调整字体大小，当屏幕宽度小于1024时，将文本字体大小设为14px。
2.2 动态脚本
另一种实现响应式字体的方式是使用动态脚本。通过Javascript计算字体大小，来实现自适应调整字体大小的目的。
html {
font-size: 14px;
}
body {
font-size: 1rem;
}
@media screen and (min-width: 376px) and (max-width: 640px) {
html {
font-size: calc(2vw + 14px);
}
}
如上代码中，通过js监听窗口大小，当窗口大小发生变化后，根据计算来实现字体大小的自适应调整。
总结：对于响应式字体，它最重要的特点是动态性。既然是动态性，那么问题也就很明显了，它需要有动态的数据支撑，而实现响应式字体的核心方法就需要用到rem单位以及js计算，来实现字体大小的自适应调整。