什么是响应式设计
响应式设计（Responsive Design）是一种能够在不同的设备上以视觉上完美的方式展现的网站，而不是一种只能在计算机端口展开的网站。它的缩放可以根据所用设备的屏幕宽高比例进行调整，为用户提供更好的体验。
通过使用媒体查询和弹性图像，响应式设计可以适应任何设备，从桌面电脑到移动设备，不仅具有精美的外观，而且可以提供更流畅的用户体验。
响应式设计中的字号问题
在响应式设计中，不仅仅是要适应不同的屏幕大小，也要注意适应不同的文字大小。在设备屏幕更改的不同尺寸时调整字体大小非常重要，这样页面的文本可以被适当地展示。但是，字号是固定的，它对于不同的设备和屏幕大小可能不适用。
因此，针对不同终端调整字体大小就成为一个必须要解决的问题。
针对不同终端调整字号的实现方法
为了在响应式设计中有效地调整字体大小以满足不同设备的需求，可以采用下面的方式：
1. 使用‘rem’作为相对字体大小
使用rem单位可以根据根元素（即html元素）来调整字体大小。它是一个相对于根元素的尺寸单位。当根元素的字体大小更改时，rem单位的大小也相应更改。
-- -------------------- ---- -------
---- -
---------- -----
-
------ ----------- ------ -
---- -
---------- -----
-
-
------ ----------- ------ -
---- -
---------- -----
-
-在上述代码中，当设备最小宽度小于768px时，html元素的字体大小为16px。当宽度为768px至992px之间时，html元素的字体大小设置为18px。当宽度大于等于992px时，html元素的字体设置为20px。
2. 使用CSS工具类进行字体调整
使用CSS工具类可以简化响应式字体调整。为了实现基于字体大小调整的响应式设计，我们可以使用以下CSS工具，如下所示：
.font-xss {font-size: .8rem !important;}
.font-xs {font-size: .9rem !important;}
.font-sm {font-size: 1rem !important;}
.font-md {font-size: 1.2rem !important;}
.font-lg {font-size: 1.5rem !important;}这些类可以根据不同的媒体查询的大小，调整字体大小。
3. 使用viewport（视窗）单位
viewport单位指的是相对于视口的长度单位，即视口的高度和宽度。使用viewport单位可以在不同的设备上调整字体大小。视口的宽度和高度可以通过CSS属性来设置。
body {
font-size: calc(1rem + 1vw);
}在上述代码中，当设备宽度更改时，字体大小相对适应宽度。
像素密度的影响
要注意的一点是，当设备的像素密度增加时，调整字体大小变得更加重要。当设备屏幕的显示像素比率（DPI）更高时，需要多调整字体大小，以便字体显示在相同的物理屏幕上。
结论
响应式设计中字体大小调整的重要性不言而喻。随着越来越多的用户使用不同的设备访问网站，为了确保符合最终用户的体验和期望值，适当调整字体大小是必不可少的。
使用以上任何一种方法，都可以调整字体大小以适应不同的终端和屏幕大小。事实上，大多数现代案例同时使用以上三种方法，以便达到更好的效果。
参考
How To Improve Responsive Design With Adjusting Font Size
responsive typography using CSS viewport units and min/max values
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f18d4a6fbf9601973cf103