这是我的 CSS：

@media(max-width:767px){body { font-size: 22px; }}
@media(min-width:768px){body { font-size: 20px; }}
@media(min-width:992px){body { font-size: 16px; }}

当我在笔记本电脑上调整浏览器窗口大小时，它会正确调整大小。但这是我的问题：当我从移动设备访问我的网站时，字体大小太小了（我不知道为什么，但我移动设备上的22像素太小了，我必须放大才能正确看到它）。当我将较小屏幕宽度的字体大小增加到40像素时，它在我的移动设备上看起来不错，但是当我从笔记本电脑访问网站并将浏览器窗口大小调整到较小宽度时，40像素太大了，最终占据了整个屏幕。

我的移动设备上的 22px 看起来很小。有没有办法（使用引导或纯 CSS）让我解决这个问题？按问题，我的意思是，22px 太小了，但 40px 在我的移动设备上是完美的。然而，在我的电脑上，情况恰恰相反（22px 是完美的，但 40px 太大了）。