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）。これの2つの最も重要な部分は、を削除しfloat、幅をに設定すること100%です。

Answer 2

これはCSS3メディアクエリです。たとえば、CSSTricksに関するこの記事を確認してください。

この特定のケースでは、次のルールがその役割を果たします。

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