自动调整标题大小，并改变窗口大小

Question

目前，我为自己创建的网站有一些代码。 我正在努力使网站适应浏览器窗口大小的变化。 我似乎无法根据浏览器窗口的大小更改标题高度。 对于我的图片，它在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>

这仅仅是为了测试我是否可以使用jQuery更改标头大小。 我知道您可以使用jQuery做到这一点。

问题如果有人可以帮助我并告诉我如何通过浏览器窗口大小的变化来调整标题大小，那将是很好的选择。 无论是在CSS还是jQuery中。

Answer 1

您可以使用媒体查询本.. 演示

CSS：

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

}

更新的演示

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

Answer 2

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

例如：

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

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

Answer 3

尝试在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 

                   }); 

Answer 4

如果你的标题显示最多height在检查0，所有的孩子都可能上浮。

无论如何，如果要减小标题的高度，则可能要转到源头并减小其子项的高度。 您将按照sarbbottam的建议使用媒体查询来执行此操作。

如果您想了解有关媒体查询的更多信息，以及您可以使用它们做的所有事情，您可能想看看CSS-Tricks上的这篇文章 。