CSS メディア クエリはどのように記述しますか?

最小幅と最大幅の両方のメディア クエリの構文を理解する

レスポンシブ Web デザイン ページのレイアウトと外観を動的に変更できる Web ページを構築するアプローチです。 訪問者の画面サイズに基づく .大きな画面には、それらの大きなディスプレイに適したレイアウトが表示されますが、携帯電話などの小さなデバイスには、その小さな画面に適した方法でフォーマットされた同じ Web サイトが表示されます。このアプローチは、すべてのユーザーに優れたユーザー エクスペリエンスを提供し、それを助けることさえできます 検索エンジンのランキングを改善する . CSS メディア クエリ レスポンシブ Web デザインの重要な部分を構成します。

メディア クエリは、Web サイトの CSS ファイル内の小さな条件付きステートメントのようなもので、画面サイズが特定のしきい値を上回ったり下回ったりした場合など、特定の条件が満たされた場合にのみ有効になる特定の CSS ルールを設定できます。

メディア クエリは現在標準ですが、非常に古いバージョンの Internet Explorer ではサポートされていません。

実際のメディア クエリ

よく構造化されたものから始めるHTML ドキュメント視覚的なスタイルはありません。

CSS ファイルで、ページのスタイルを設定し、Web サイトの外観のベースラインを設定します。ページのフォント サイズを 16 ピクセルにするには、次のように記述します。 CSS :

|_+_|

メディア クエリの追加

さらに、サイズが大きくなるたびにメディア クエリを追加して、次のようにスタイル シートに挿入することもできます。

|_+_|

最初のメディア クエリは幅 1000 ピクセルで開始され、フォント サイズが 20 ピクセルに変更されます。その後、ブラウザが 1400 ピクセルを超えると、フォント サイズが再び 24 ピクセルに変更されます。特定の Web サイトに必要な数のメディア クエリを追加します。

最小幅と最大幅

一般に、メディア クエリを記述する方法は 2 つあります。 最小幅 または 最大幅 .これまでのところ、min-width の動作を見てきました。このアプローチでは、ブラウザーが少なくともその最小幅に達した後にメディア クエリをアクティブにします。したがって、使用するクエリ 最小幅: 1000px ブラウザの幅が 1000 ピクセル以上の場合に適用されます。このスタイルのメディア クエリは、モバイル ファーストの方法でサイトを構築する場合に使用されます。

使用する場合 最大幅 、それは逆の方法で動作します。ブラウザがこのサイズを下回ると、「max-width: 1000px」のメディア クエリが適用されます。