web-dev-qa-db-ja.com

電話/小画面用のレスポンシブCSS

基本的なレスポンシブwordpressテーマを設定しようとしています。まず、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;
    }
}
css3twitter-bootstrapresponsive-designmedia-queries
9
MrGlass

ビューポートのメタタグを適切に設定していないようです。

以下のようになります。

<meta name="viewport" content="width=device-width; maximum-scale=1; minimum-scale=1;" />
7
defau1t