html - 如何使我的 css 标题响应

Question

我正在使用这个 CSS:

#header-topbar {
    width:100%;
    height:120px;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    position: absolute;
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}

对于我的标题，我想让它响应。我知道如何使用媒体查询，但我不确定其余的 CSS。

如何使 Logo div 显示在顶部居中，然后文本显示在下方？

我在这里创建了一个 fiddle :http://jsfiddle.net/bMsMw/这样你就可以看到 html

谢谢

Answer 1

检查这个demo

在 #header-topbar 中，以便于在 media query 中操作高度不应该声明，
在 #logo 中是否有你 position:absolute 的原因，这就是为什么你的 Logo 因为显示在 absolute:position 上而没有下降的原因之一元素的顶部，

#header-topbar {
    float:left;
    width:100%;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}
#logo img {
    max-width:100%;
    width:100%;
}
@media handheld, screen and (max-width: 620px){
    #logo{
        width:70%;
        float:none;
        margin-left:auto;
        margin-right:auto;
    }
    #header-right-content {
        float:left;
        width:100%;
        text-align:center;
    }

}

希望这对你有帮助..