Javascript 通过更改窗口大小自动调整页眉大小

我目前有一些代码为我自己创建的网站。我正在努力使网站适应浏览器窗口大小的变化。我似乎无法根据浏览器窗口大小更改页眉高度。对于我的图片，它在css中工作非常简单：

        #logoArea
        {
            width: 15.625%;
            height: auto;
            position: absolute;
            left: 10%;
        }

但当我对标题使用相同的代码时，它不起作用：

        #header
        {
            background-color: black;
            width: 100%;
            height: auto;
        }

收割台的高度不会同时出现，我检查元件时给出了0px的高度

我尝试在jQuery中使用.resize（），如下所示：

        <script>
            $(document).ready(function(){
                $(window).resize(function(){
                    AdjustHeader();
                });
            });
            function AdjustHeader(){
                if (jQuery(window).width() = 1600) {
                    jQuery("#header").height(200);
                } 
                else
                {
                    jQuery("#header").height(150);
                }
            }
        </script>

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
调整收割台（）；
});
});
函数AdjustHeader（）{
if（jQuery（window）.width（）=1600）{
jQuery（“#标题”）。高度（200）；
} 
其他的
{
jQuery（“#标题”）。高度（150）；
}
}

这只是为了测试我是否可以使用jQuery更改头大小。我知道你可以用jQuery来完成

---

问题如果有人能帮助我，告诉我如何根据浏览器窗口大小的变化调整页眉大小，那就太好了。无论是css还是jQuery。

使用媒体查询并为每个断点设置所需的样式

例如：

@media (max-width: 480px) {
    ...  
}

@media (min-width: 481px) and (max-width: 768px) {
    ... 
}

---

您可以对此使用媒体查询

CSS:

@media only screen and (max-width: 1600px) {
    #header {
        height:200px;
    }
}
@media handheld, only screen and (max-width: 940px) {
    #header {
        height:150px;
    }

}

#header {
    background: black;
    width: 100%;
    height: auto;
    display:block;       
    -webkit-transition: .2s height linear;
    -moz-transition: .2s height linear;
    -o-transition: .2s height linear;
    transition: .2s height linear;
}

更新

CSS:

@media only screen and (max-width: 1600px) {
    #header {
        height:200px;
    }
}
@media handheld, only screen and (max-width: 940px) {
    #header {
        height:150px;
    }

}

#header {
    background: black;
    width: 100%;
    height: auto;
    display:block;       
    -webkit-transition: .2s height linear;
    -moz-transition: .2s height linear;
    -o-transition: .2s height linear;
    transition: .2s height linear;
}

---

尝试在jquery中添加重新调整窗口大小的侦听器。此事件将在每次重新调整窗口大小时调用。看一看

                   $(window).resize(function(e) {
                             var old_width = e.old.width;
                             var old_height = e.old.height;
                             var new_width = $(this).width();
                             var new_height = $(this).height();
                          // your stuff here 

                   }); 

---

如果您的标题在检查器中显示为

height

0，则其所有子项都可能会浮动

在任何情况下，如果要降低标题的高度，可能需要转到源并降低其子项的高度。您可以按照sarbbottam的建议，使用媒体查询

---

如果你想了解更多关于媒体查询的信息，以及你能做的一切，你可能想看看CSS技巧。

你能用你的代码创建一个小提琴链接吗？而不是jQuery（“标题”）。高度（150）；试试jQuery（“#header”）.css（'height'，'150px'）；这就是您使用的jQuery代码吗？抱歉，我忘了添加我希望标题根据图像大小调整到网站的当前状态：我喜欢这一点，并且我已经考虑过如何使用它，但随后您会得到分块转换。当前，图像会随着浏览器窗口大小不断调整。我希望标题也这样做；根据窗口浏览器大小和图像进行调整。使用动画更新了我的代码。。你也可以试试别的：）