在桌面和移动设备的页面上设置不同的字体大小

Question

我的网站使用开箱即用的响应主题：“Lawetique”。

字体在我的台式电脑上看起来很糟糕。文字又细又窄。但它在手机上看起来很棒。窄字体适合垂直方向，大小正好。

如果它只是更大的话，它在桌面上看起来会更好，但我不知道如何让 PC 上的字体比例更大而不让它在手机上看起来很卡通。

我在 CSS 方面还可以，但在设备控制方面一无所知。真诚感谢任何帮助！

Answer 1

/* mobile styles first */
body {
  font-size: 16px;
}

/* tablet styles */
@media screen and (min-width: 768px) {
    body {
        font-size: 20px;
    }
}


/* desktop styles */
@media screen and (min-width: 1024px) {
    body {
        font-size: 24px;
    }
}