根据屏幕宽度调整div高度

Question

我有一个固定高度 445px 的 div，如下：

header {
    text-align: center;
    height: 445px;
    overflow: hidden;
  margin-top: 0;
  box-shadow: 0 1px 1px rgba(57, 63, 72, 0.3);
}

我希望它在屏幕宽度缩小时保持相同的高度。

问题是，当宽度缩小到 500px 以下时，header 的标题变成了两行，结果搜索输入栏消失了。

所以，我想说：

if (screen size >= 500) height = 600px

有可能吗？我不想使用 vh 或 vw，因为它不应该是渐变的，它仅适用于 500 像素以下的屏幕。

我正在使用反应

Answer 1

您可以使用媒体查询。您可以为不同的屏幕尺寸定义样式。

@media only screen and (max-width: 500px) {
    header {
        height:600px;
       }
 }

Answer 2

如果我理解正确的话，你必须这样做：

@media only screen and (min-width: 500px) {
    header {
        height: 600px;
    }
}

这意味着如果屏幕大于500px，标题的高度将为600px

Answer 3

你的 html 是什么样的？这听起来像是您试图影响的 div 类的问题。