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

您可以使用媒体查询.. 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;
}

Answer 2

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

例如：

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

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

Answer 3

尝试在jquery中添加window re-size listener。此事件将调用每个时间窗口重新调整大小。看看

                   $(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的this article。

自动调整页面大小更改的大小

4 个答案: