媒体查询不起作用。是的，您可以根据屏幕大小使用不同的字体大小（屏幕大小是像素大小，而不是物理大小，因此，在两个具有相同物理大小屏幕但像素密度不同的设备上，字体大小不会相同）。您的目标是在所有具有相同物理屏幕大小的设备上使用相同物理大小的文本，而不管像素密度如何。
如今移动的在手掌大小的屏幕上安装了超高清分辨率，而旧手机的像素密度要低得多。
这个问题直到最近才有解决方案。最近CSS3增加了对他们所谓的“Viewport Sized Typography”的支持。它允许你相对于物理屏幕大小设置东西的大小。here对此进行了解释。

在不同的设备上，拥有相同/相似大小的文本是可取的，但默认情况下你不会这样做。这不是因为较小的设备具有更少或更小的物理像素，而是由于这些设备上发生的缩放，以避免破坏页面，这些页面大多是为较大的桌面屏幕设计的。
例如，iPhone5的物理像素为1136 x640，但使用chrome的开发者工具的设备工具栏，您可能会看到一些元素看起来比这大得多（比如1300 x900）。这是因为浏览器默认应用的缩小比例。在这种情况下，CSS像素大小将变得比实际像素大小小得多。想象一下在智能手机中看到桌面大小的页面，只是小了很多。
如果你不希望这种情况发生，你需要明确告诉浏览器不要弄乱缩放（在你的页面标题中）：

<meta name="viewport" content="width=device-width, initial-scale=1">

如果你在不同的设备上看到同样大的文本，你可能有类似的东西，只需要删除它就可以在智能手机上看到更小的文本。

您应该对不同的设备宽度使用介质查询。

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

等等...

我已经开始使用REM和EM来实现这一点。
我不知道手机浏览器的默认字体大小是根据屏幕大小还是特定于设备而变化，所以我所做的是使用vw和vh将HTML设置为相对于设备的平均高度和宽度的字体大小，如下所示

HTML{font-size: calc((1vh+1vw)/2)}

通过使用REM和EM，您可以获得更一致的布局和字体大小。
这对于移动的设备来说效果很好，因为它们都倾向于相同的长宽比。我建议你改变一下平板电脑和台式机的实现方式，因为它们的屏幕比例往往是非常不同的。当然，使用媒体查询来为这些设备设置单独的样式。
我想说，我刚刚开始使用这种方法，所以很想听到的原因，我完全不应该使用它！

使用@media查询并为不同分辨率设置不同字体
示例

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

Good Read On Media Queries

或者，您可以查看https://github.com/modularscale/modularscale-sass
它可以很快变得非常复杂，设置大量的断点，以满足每一个单一的移动终端，我已经获得了非常好的结果与模块规模。
此外，如果您希望完全可访问/灵活，那么在EM或REM中设置字体大小也是一种方法。

答案都是正确的，但我发现视口大小的组合与clamp()相关，但仅限于两个理想值之间。例如：

font-size: 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);

这将平滑地调整文本大小，但不会低于1rem（典型值为16px）或超过1.25rem（典型值为20px）。它可以用于图标或字体字符或svg向量的大小。我使用许多在线钳计算器中的一个来节省我的数学计算。例如this one。