1

Thesis 2 を使用して自分の Web サイトでテーマを開発しています。従来のレスポンシブ テーマを変更しました。

「header-middle-sub」という div タグを使用して ID を作成しました。そして、ここに私が使用したコードがあります：

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;
}

デスクトップを使用するブラウザでうまく機能します。しかし、レスポンシブテーマなので、タブレットや携帯電話でサイトを開くと、幅が897px固定で占有されます。

この行を削除するwidth: 897px;と、タイトルが画面の中央に配置されます。では、タイトルの位置を保持するためのコードは何ですか?

ところで、ここに私のウェブサイトhttp://bit.ly/1cuTmtEがあります。

アップデート：

誰でも私のサイトにアクセスして、chrome または firefox の「inspect 要素」を使用できますか?

ヘッダー セクションの CSS は次のとおりです。

.header {
    margin: 0 auto;
    padding: 0px;
    background-color: #C4C4C4;
}

#header-top {
    background-color: #7ED7F2;
}

#header-middle {
    background-color: #6699CC;
    border-bottom: 5px solid #0f3158;
    border-top: 2px solid #0F3158;
    padding: 20px 0 20px 0;
}

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;
}

#header-bottom {
    background-color: #0099CC;
}

#header-container {
    display: table;
    margin: 0 auto;
}

論文2を使用した私のテーマのレイアウトは次のとおりです。

ここに画像の説明を入力

4

5 に答える 5

1

デスクトップでも機能しません。ブラウザ ウィンドウを非常に小さくすると、水平スクロール バーが表示されます。幅は常に固定です。

この動作を回避するには、次の CSS コードを使用します。

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    max-width: 897px;
    width: 100%;
}

divこれで、常にブラウザ ウィンドウ全体に を拡大しようとしますが、 max-width897 ピクセルに制限されますが、可能性は低くなり、携帯電話やブラウザ ウィンドウのサイズを変更するときに使用される量も少なくなります。

于 2013-10-09T12:19:01.793 に答える