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

Question

我正在看来自 studiopress 的主题1140。

当我大大缩短浏览器窗口（作为移动响应主题）时，徽标变为 100% 宽度，使菜单漂亮地落在下面。

知道这是怎么做到的吗？

Answer 1

这种技术称为响应式设计并依赖于媒体查询。

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

.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宽时。（查看他们的 CSS 文件并搜索#title）。其中最重要的两个部分是删除float并将宽度设置为100%。

Answer 2

这是 CSS3 媒体查询。例如查看这篇关于CSS Tricks的文章。

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

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