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

Question

我试图借助视口的宽度设置字体大小，并希望通过使用

来设置视口大小的20％

h4{
  font-size: 20vw;
}

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

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

Answer 1

使用vw代替（“视口宽度”）。另外，vw很大，将字体定义为：

h4 {
  font-size: 1vw;
}

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

  

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

仅当屏幕足够小时，页面才会遵循此命令。