css - 响应式设计行为

Question

这是我的第一个响应式网站。我对此很满意，但是有一个非常烦人的方面完全难倒了我。原来的网站是 www.elitemarquees.com.au 我把主页改成了:

http://elitemarquees.com.au/test/index.html

问题是；当我缩小浏览器时，除了菜单 (#headNav) 在某一点外，所有内容都按照我的预期移动和运行。它跳到主要内容 (#content) 并位于正文第二行下方。然后，当你变小时，它会 self 纠正并跳回 Logo (#headLogo) 和主体文本之间。以下是我最初设置 div 部分的方式:

//this section contains two divs headLogo and headNav
#header {
height: 180px;
}
#headLogo {
width: 250px;
float: left;
}
#headNav {
width: 600px;
float: right;
margin-top: 70px;
padding-right: 40px
}
#content {
width: 500px;
float: right;
padding-right: 140px
}

我这样做是我认为不良行为发生的地方:

/* for 700px or less */
@media screen and (max-width: 700px) {

#headNav {
    width: auto;
    float: none;
}
#headLogo {
    width: auto;
    float: none;
}
#content {
    width: auto;
    float: none;
}
#sidebar {
    width: auto;
    float: none;
}

}

当它被触发时它会 self 纠正:

/* for 480px or less */
@media screen and (max-width: 480px) {

#header {
    height: auto;
}
#headNav {
padding-right: 0px;
margin-top: 0px;
}
h1 {
    font-size: 24px;
}
#content {
    padding-right: 10px
}
}

谢谢你的帮助

Answer 1

这里

/* for 700px or less */
@media screen and (max-width: 700px) {

#headNav {
    width: auto;
    float: none;
}
#headLogo {
    width: auto;
    float: none;
}
#content {
    width: auto;
    float: none;
}
#sidebar {
    width: auto;
    float: none;
}

}

你应该添加这个:

#header{
        height: auto;
    }