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的其余部分。

如何制作，以便徽标div显示在顶部，居中，然后显示在下面的文字？

我在这里创建了一个小提琴：http://jsfiddle.net/bMsMw/所以你可以看到html

感谢

Answer 1

检查此demo

在#header-topbar中

以便在media query高度中轻松操控不应该说明，
在#logo中，您有position:absolute这就是为什么您的徽标不会因为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;
    }

}

希望这能帮到你..

Answer 2

喜欢这个？ http://jsfiddle.net/bMsMw/1/ 不完全确定图像应该如何适合。

code

如何使我的CSS头响应

2 个答案: