css - 根据设备动态字体大小

Question

小问题，我找不到任何答案。有办法做到这一点吗？

我有 3 个不同大小的元素。一个为 30px，另一个为 22px，另一个为 16px。现在，当使用平板电脑检查这些元素时，它们超出了限制，因为我需要让我的容器具有固定的高度。有没有一种方法可以使用媒体查询根据设备减小字体大小，而无需一个一个地进行？比如在台式机中为 100%，在平板电脑中为 80，等等。

非常感谢。

Answer 1

您可以在 CSS 中使用视口(viewport)宽度和高度:

.vwHeight {font-size: 5.9vw;}

相同的预览将是:

_{(来源:css-tricks.com)}

有关 Viewport Sized Typography 的更多信息.