javascript - 随着窗口大小的变化自动调整标题大小

Question

我目前为自己创建的网站准备了一些代码。我正在努力使网站适应浏览器窗口大小的变化。我似乎无法根据浏览器窗口大小更改标题高度。对于我的图片，它在 css 中非常容易工作:

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

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

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

header的高度没有全部出现，我检查元素时给出了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>

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

问题 如果有人可以帮助我并告诉我如何使 header 大小随着浏览器窗口大小的变化而调整，那会很棒。无论是在 css 还是 jQuery 中。

Answer 1

你可以为此使用媒体查询.. Demo

CSS:

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

}

已更新 Demo

CSS:

#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;
}