レスポンシブなwebデザインを実装するためには、CSSのメディアクエリ、特にmedia onlyとmedia screenクエリを理解することが重要明白な質問から始めましょう。

メディアクエリとは何ですか？

メディアクエリとは何ですか？

メディアクエリはCSS3で導入された技術です。 このクエリでは、@mediaルールを使用して、所定の条件がtrueの場合にCSSプロパティのブロックを実行します。

たとえば、以下のコードでは、ブラウザウィンドウが400px以下の場合、背景色は薄い緑色になります。

@media only screen and(max-width:400px){
body{
Background-color:lightgreen;
}
}

メディアクエリは、レスポンシブデザインのブレークポイントを追加する際に特に役立ちます。 ブレークポイントは基本的に、コンテンツやデザインがユーザーに異なるように表示されるピクセル番号であるため、メディアクエリを使用して、どのピク以下の例では、ブラウザウィンドウが600px以下に縮小されている場合、各列の幅は100%になります。

/*for desktop:*/
。col-1{幅:8.33%;}
。col-2{幅:16.66%;}
。col-3{width:25%;}
。col-4{幅:33.33%;}
。col-5{幅:41.66%;}
。col-6{width:50%;}
.col-7{幅:58.33%;}
。col-8{幅:66.66%;}
。col-9{幅:75%;}
。col-10{幅:83.33%;}
。col-11{幅:91.66%;}
。col-12{width:100%;}

@メディアのみの画面and(max-width:600px){
/*携帯電話の場合:*/
{
width:100%;
}
}

すべてのメディアクエリは、オプションのメディアタイプと1つ以上のメディア機能式で構成されます。 複数のメディアクエリを論理演算子と組み合わせることができます。 すべてのメディアクエリでは、大文字と小文字が区別されます。

指定されたメディアタイプがwebサイトが表示されているデバイスと一致する場合、すべてのメディアクエリはtrueと見なされます。 また、メディアフィーチャ式もtrueである必要があります。

メディア画面クエリとは何ですか？

@media screenクエリは、問題のクエリが”screen”モードをサポートするカラー画面またはデバイスを対象としていることを意味します。例を見てみましょう：

@media screen and(max-width:500px)

上記のクエリは、最大幅が500ピクセルの画面に適用されます。 これのポイントは、主に、”スクリーン”と他のメディアタイプ（印刷、点字、エンボス加工、ハンドヘルドなど）を区別するようにコードを指示することです。).メディアのみのクエリとは何ですか？

メディアのみのクエリとは何ですか？

メディアクエリに論理演算子’only’を追加することにより、開発者は条件全体が一致する場合にのみクエリが適用されるようにします。 Onlyを使用しない場合、古いブラウザでは、すべてのメディア機能式を読み取ったり解釈したりしない可能性があります。 たとえば、クエリが

@media screen and(max-width:500px)

古いブラウザは、クエリを単なるscreenとして解釈し、ピクセル数を無視することがあります。 これにより、すべての画面にクエリ条件が適用されます。 これを防ぐには、次のように使用できます。

@media only screen and(max-width:500px)

only演算子を使用する場合は、必ずメディアタイプを指定してください。

レスポンシブデザインにおける意義

メディアクエリは、レスポンシブwebデザインの実装に役立ちます。 上記で説明したクエリは、最も一般的に使用される2つのクエリであり、webサイトのコンテンツがデバイスのサイズと種類に最適化されていることを確認するのに役立ちます。

あなたのウェブサイト上でCSSクエリを使用したら、その有効性を確認してください。 これを行う最も簡単な方法は、実際のデバイスとブラウザでウェブサイトのデザインをテストできるツールを使用することです。 そこにこれを容易にするための複数のツールがありますが、デスクトップとモバイルの両方—あなたのデバイスの十分に多種多様でテストする機会を与