根据设备动态字体大小答案

【问题标题】：Dynamic font-size according to device根据设备动态字体大小
【发布时间】：2015-09-09 02:53:12
【问题描述】：

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

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

非常感谢。

【问题讨论】：

标签： css

【解决方案1】：

您可以在 CSS 中使用视口宽度和高度：

.vwHeight {font-size: 5.9vw;}

同样的预览将是：

_{（来源：css-tricks.com）}

更多关于Viewport Sized Typography的信息。

【讨论】：

我看到了。问题是我需要使用固定的字体大小，尽管我确信这些会在很多方面对我有很大帮助。
其实你在自相矛盾。您想让字体大小根据屏幕大小而变化，但同时又想让它们保持固定？ :/
固定喜欢。桌面：16 像素。平板电脑：12 像素。就这样。
@DinisFigueira 老板！那么就简单了，为什么不用@media查询呢？
但是那样的话，我得一一定义。当我有很多需要它的元素时，这对我没有多大帮助。

【解决方案2】：

您可以使用vw、vmax、vmin 或em，这里有许多可以帮助您的 CSS 单元。

例如：-

.block {font-size: 5vw;}

或

.block {font-size: 5vmax;}

您应该使用以下链接，我相信它会对您有所帮助。

URL

【讨论】：

我可以看到您已经指定了 vmax 和其他可用的可变宽度。这与我的答案有何不同或更好？ #Curious;)