Question

这是我的第一个响应式网站。我对它感到满意，但是有一个非常讨厌的方面让我感到困惑。原始网站是www.elitemarquees.com.au我已将主页更改为：

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

问题是;当我使浏览器变小时，除了菜单（#headNav）之外，一切都会移动并按照我的意图行事。它跳转到主要内容（#content）并位于正文文本的第二行下方。然后当你变小时它会纠正它的自我并跳回徽标（#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;
}

}

当它被解雇时，它会纠正自己：

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

响应式设计行为

1 个答案: