レスポンシブルデザインによるcss3

Question

メディアクエリを使用しようとしています。私は頭と@media（最小幅：768px）にメタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1">を含めました{ 背景色：赤; } を私のCSSに入れてください。これは機能しないので、私が行方不明のものがありますか？

Answer 1

あなたのメディアクエリーはOKですが、あなたの背景色がちょうどCSSプロパティである、あなたは、要素が関係しているかを指定する必要があります。

@media (min-width: 768px) { 
    html, body { 
     background-color: red; 
    } 
} 

Answer 2

あなたはとても、SASSを利用だけでなく、応答性の設計として、これをタグ付け私は、他の人が将来的に関連する質問がある場合に備えて、より精巧なSASS指向の回答を提供することが適切だと思います。

最初に、@migliのすべてが注目されました。CSSで特定のDOM要素をターゲットにしていることを確認する必要があります。 SASSを使用する主なメリットの1つは、コードをDRYにしてブレークポイントを作成することで、メディアクエリを非常にシンプルに書くことができるということです。

は、例えば、ここでは、ティム・ナイトによってeasy-to-follow general-purpose exampleである（特定のブレークポイントのしきい値を設定する@mixinを設定し、これを実行するには：あなたのSASSファイルを編集しているとして、あなたは区分することができ、今

@mixin breakpoint($class) { 
    @if $class == xs { 
    @media (max-width: 767px) { @content; } 
    } 

    @else if $class == sm { 
    @media (min-width: 768px) { @content; } 
    } 

    @else if $class == md { 
    @media (min-width: 992px) { @content; } 
    } 

    @else if $class == lg { 
    @media (min-width: 1200px) { @content; } 
    } 
} 

あなたコード、DRYそれを維持するために例えば、次のようSASS：。

body { 
    height: 100%; 
    width: 100%; 
    font-size: 1.8em; 
    @include breakpoint(md) { 
    font-size: 1.5em; 
    } 
} 

出力を

body { 
    height: 100%; 
    width: 100%; 
    font-size: 1.8em; 
} 

@media (min-width: 992px) { 
    body { 
    font-size: 1.5em; 
    } 

これは小さな例ですが、プロジェクトの規模と範囲が拡大するにつれて、キーストロークを保存して読みやすさを向上させることで、生産性（および健全性）が大幅に向上します。