视口宽度/高度（10vw）最大/最小字体大小

Question

我刚刚声明使用视口单元，不知道如何处理这个，所以任何反馈都表示赞赏。

我已经创建了元素

<h4>text here</h4>

添加了一些风格

h4 {font-size:7vp;}

这在移动设备，手机和笔记本电脑上非常出色。但是，一旦屏幕尺寸超过笔记本电脑的尺寸以跟上视口宽度，文本的高度对于视口高度会变大两个。

如果你知道我的意思。

我正在寻找像

这样的东西

max-size: 

但更像是

max-font-size:

Answer 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" />