视口宽度/高度 (10vw) 最大/最小字体大小答案

【问题标题】：Viewport width/height (10vw) max/min font size视口宽度/高度 (10vw) 最大/最小字体大小
【发布时间】：2015-12-29 20:34:16
【问题描述】：

我刚刚说过使用视口单元，不知道如何处理，因此感谢任何反馈。

我已经创建了元素

<h4>text here</h4>

添加了一些样式

h4 {font-size:7vp;}

这非常适合移动设备、手机和笔记本电脑。但是一旦屏幕尺寸超过笔记本电脑的尺寸以跟上视口宽度，文本的高度就会比视口高度大两倍。

如果你明白我的意思。

我正在寻找类似的东西

max-size:

但更像

max-font-size:

【问题讨论】：

标签： html css

【解决方案1】：

没有max-font-size 这样的东西，但您可以使用media queries 来检测窗口何时变为桌面大小。例如：

media screen and (min-width: 768px) {
  h4 {
    font-size: 14px;
  }
}

当窗口大小大于 768px 时，这将覆盖从 vh 到 px 的字体大小。

注意：要使用媒体查询，请确保在主 html 文件中添加此标签

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

【讨论】：