10

基本的なレスポンシブワードプレステーマをセットアップしようとしています。まず、wordpress.org からツールボックス テーマを入手し、Twitter ブートストラップレスポンシブ css/js を追加しました。

小さな画面でパディングを減らし、色を変更して動作していることを示すためだけに、いくつかの基本的なテスト スタイルを追加しました。何らかの理由で、横向きの電話のスタイルが機能しません。

私のサイトはこちらからご覧いただけます。

私のレスポンシブCSSコード:

/* Large desktop */
@media (min-width: 1200px) { 
    body    {
        padding-left: 50px;
        padding-right: 50px;
        color: green;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) { 
    body    {
        padding-left: 30px;
        padding-right: 30px;
        color: purple;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    body    {
        padding-left: 20px;
        padding-right: 20px;
        color: blue;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) { 
    body    {
        padding-left: 5px;
        padding-right: 5px;
        color: red;
    }
}
4

1 に答える 1

7

ビューポートのメタ タグが正しく設定されていないようです。

以下のようになります。

<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />
于 2012-12-13T07:13:36.430 に答える