在使浏览器窗口非常短时使标题全宽

Question

我正在研究来自studiopress的主题eleven40。

当我大量缩短浏览器窗口（作为移动响应主题）时，徽标会变为100％宽度，使菜单下降得很漂亮。

知道如何做到这一点？

Answer 1

此技术称为Responsive Design，依赖于media queries。

在这种情况下，他们正在改变这一点：

.header-image #title-area,
.header-image #title,
.header-image #title a {
    display: block;
    float: left;
    height: 90px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 265px;
}

到此：

#title {
    width: 100%;
    padding: 18px 0 17px;
}

#title-area {
    float: none;
    text-align: center;
    width: 100%;
}

当浏览器的宽度小于800px时。 （请参阅their CSS file并搜索#title）。其中最重要的两个部分是删除float并将宽度设置为100%。

Answer 2

这是CSS3媒体查询。请查看CSS Tricks上的这篇文章。

在这种特殊情况下，下一条规则可以完成工作：

@media only screen and (max-width: 800px) {
    ...
    #title {
        width: 100%;
        padding: 18px 0 17px;
    }
    ...
}