根據屏幕寬度調整 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 ，因為它不應該是漸進的，它只適用於 500px 以下的屏幕。

我正在使用反應

Answer 1

您可以使用媒體查詢。 您可以為不同的屏幕尺寸定義 styles。

@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 的 class 的問題。