尝试使用视口宽度设置 div 的宽度不起作用

Question

我尝试在视口宽度的帮助下设置字体大小，并希望使用

设置视口大小的 20% 的大小

h4{
  font-size: 20vw;
}

但它设置的字体大小很大。可能比预期的大 30 倍。我错过了什么吗？当我从教程Tryit Editor v3.6 进行测试时，它的工作原理就像预期的那样，所以我不知道会出现什么问题。

示例：通过使用 window.innerWidth，我得到了 1229px 的视口大小，其中 13vn 应该使文本适合 160px 的文本字段，据我所知。

Answer 1

改用vw，它代表('viewport width')。另外，vw 是一个很大的数字，将字体定义为：

h4 {
  font-size: 1vw;
}

如果字体仍然太大，请使用“0.x”值。如果字体在某些时候变得太小，请使用 CSS 的 @media 定义最小尺寸，如下所示：

@media all and (max-width: 800px) { h4 { font-size: 12px; }

只有当屏幕足够小时，页面才会遵循这个命令。