私たちは頼りにしています CSSメディアクエリ ターゲット条件に基づいて要素を選択およびスタイリングするため。 その条件はあらゆる種類のものである可能性がありますが、通常、(1) 使用されているメディアの種類、および (2) ブラウザー、デバイス、さらにはユーザーの環境の特定の機能の XNUMX つの陣営に分類されます。
たとえば、特定の CSS スタイルを印刷ドキュメントに適用したいとします。
@media print {
.element {
/* Style away! */
}
}特定のビューポート幅でスタイルを適用できるという事実により、Ethan Marcotte 以降、CSS メディア クエリはレスポンシブ Web デザインの中心的な要素になりました。 用語を造った. ブラウザーのビューポート幅が特定のサイズである場合は、一連のスタイル ルールを適用します。これにより、ブラウザーのサイズに対応する要素を設計できます。
/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
.element {
/* Style away! */
}
}TDS１.３５％、収率２０.８％を維持するために浸漬法は２.１グラム多くのコーヒーが必要になります and そこで？ これは、ステートメントを結合できる演算子です。 その例では、メディア タイプが a であるという条件を組み合わせました。 screen そしてそれは min-width 機能はに設定されています 30em （またはそれ以上）。 ビューポート サイズの範囲をターゲットにするために、同じことを行うことができます。
/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
.element {
/* Style away! */
}
}これらのスタイルは、単一の幅ではなく、明示的な範囲のビューポート幅に適用されるようになりました!
しかし、メディア クエリ レベル 4 仕様では、一般的な数学的比較演算子を使用して、さまざまなビューポート幅を対象とする新しい構文が導入されました。 <, >, = — より少ないコードを記述しながら、構文的により理にかなっています。
それがどのように機能するかを掘り下げてみましょう。
新しい比較演算子
最後の例は、 and オペレーター。 Media Queries Level 4 仕様の大きな変更点は、値を結合するのではなく比較する新しい演算子があることです。
<値が 未満 別の値>値が 越える 別の値=値が 等しい 別の値に<=値が t 以下o 別の値>=値が t 以上o 別の値
ブラウザが 600px ワイド以上:
@media (min-width: 600px) {
.element {
/* Style away! */
}
}比較演算子を使用して同じことを記述すると、次のようになります。
@media (width >= 600px) {
.element {
/* Style away! */
}
}ビューポート幅の範囲をターゲットにする
多くの場合、CSS メディア クエリを作成するときは、いわゆる ブレークポイント — デザインが「壊れる」状態で、それを修正するために一連のスタイルが適用されます。 設計には多数のブレークポイントを含めることができます。 そして、それらは通常、ブレークポイントの開始位置とブレークポイントの終了位置の XNUMX つの幅の間にあるビューポートに基づいています。
を使用してそれを行った方法は次のとおりです and 演算子を使用して XNUMX つのブレークポイント値を結合します。
/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
/* etc. */
}ブール値を捨てると、メディアクエリを書くのがどれだけ短くて簡単になるかがよくわかります。 and 新しい範囲比較構文を優先する演算子:
@media (400px <= width <= 1000px) {
/* etc. */
}はるかに簡単ですよね？ そして、このメディア クエリが何をしているのかは明らかです。
ブラウザサポート
この改良されたメディア クエリ構文は、この記事の執筆時点ではまだ初期段階にあり、現時点では、組み合わせたアプローチほど広くサポートされていません。 min-width & max-width. しかし、私たちは近づいています！ Safari は、現時点で唯一の主要なホールドアウトですが、 そのためのオープンチケットがあります あなたが従うことができること。
このブラウザのサポートデータは 使ってもいいですか、詳細があります。 数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示します。
デスクトップ
| クロム | Firefoxの | IE | エッジ（Edge） | Safari |
|---|---|---|---|---|
| 104 | 63 | いいえ | 104 | いいえ |
モバイル/タブレット
| Android Chrome | AndroidのFirefoxの | Android | iOSのSafariの |
|---|---|---|---|
| 106 | 106 | 106 | いいえ |
例を見てみましょう
デスクトップなどの大きな画面に適したレイアウトを次に示します。
このレイアウトには、すべてのブレークポイントに共通の基本スタイルがあります。 しかし、画面が狭くなるにつれて、さまざまな小さなブレークポイントで条件付きで適用されるスタイルを適用し始めます。これらのスタイルは、タブレットから携帯電話に至るまで理想的に適しています。
何が起こっているかを確認するために、XNUMX つの小さなブレークポイントの間でレイアウトがどのように応答するかを以下に示します。 非表示のナビゲーション リストが表示されるだけでなく、 title セクションに main で増加します font-size.
ビューポートの変更が、あるメディアの条件に一致するものから別のメディアの条件に一致する場合に、その変更がトリガーされます。
/* Base styles (any screen size) */
header {
display: flex;
justify-content: center;
}
header ul {
display: none;
}
.title p {
font-size: 3.75rem;
}
/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
header {
justify-content: space-between;
}
header ul {
display: flex;
justify-content: space-between;
gap: 3rem;
}
.title p {
font-size: 5.75rem;
}
}これまでに説明したいくつかの概念を組み合わせました。 のデバイスをターゲットにしています。 screen メディア タイプ、新しいメディア機能範囲構文を使用してビューポート幅が特定の値以上かどうかを評価し、XNUMX つの条件を and オペレータ。
わかりました。以下のモバイル デバイスに最適です。 768px および同等以上の他のデバイスの場合 768px. しかし、そのデスクトップ レイアウトはどうでしょうか。どうすればそこに到達できるでしょうか。
レイアウトに関する限り：
-
main要素は 12 列のグリッドになります。 - 画像の上にボタンが表示されます。
- サイズ
.title要素のフォントが増加し、画像に重なります。
宿題を終えて、これらの変更を行うべき場所を正確に決定したと仮定すると、ビューポートが一致するときにそれらのスタイルを適用できます width そのブレークポイントの条件。 ブレークポイントが 1000px:
/* When the media type is a screen with a width greater or equal to 1000px */
@media screen and (width >= 1000px) {
/* Becomes a 12-column grid */
main {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto 250px;
}
/* Places the .title on the grid */
.title {
grid-row: 1;
}
/* Bumps up the font-size */
.title p {
font-size: 7.75rem;
}
/* Places .images on the grid */
.images {
grid-row: 1 / span 2;
align-self: end;
position: relative;
}
/* Displays the button */
.images .button {
display: block;
position: absolute;
inset-block-end: 5rem;
inset-inline-end: -1rem;
}
}
それを使って遊んでください：
新しい構文が理解しやすい理由
結論: 比較演算子を区別する方が簡単です (例: width >= 320px）の違いを伝えることよりも min-width & max-width and オペレーター。 間のニュアンスを取り除くことで min- & max-、シングルが XNUMX つあります width 操作するパラメーターと、オペレーターが残りを教えてくれます。
これらの構文の視覚的な違いだけでなく、実行することもわずかに異なります。 使用する min- & max- は、数学的な比較演算子を使用するのと同じです:
max-widthと同等です<=演算子（例：(max-width: 320px)と同じです。(width <= 320px)).min-widthと同等です>=演算子（例：(min-width: 320px)と同じです。(width >= 320px)).
どちらも同等ではないことに注意してください > or < 演算子。
Media Queries Level 4 仕様から直接例を引き出してみましょう。ここでは、ブレークポイントに基づいてさまざまなスタイルを定義します。 320px を使用してビューポート幅で min-width & max-width:
@media (max-width: 320px) { /* styles for viewports = 320px */ }ビューポートの幅が次の場合、両方のメディア クエリが条件に一致します。 320px. それはまさに私たちが望んでいることではありません。 私たちは欲しい どちら 同時に両方ではなく、これらの条件のいずれかです。 その暗黙の変更を避けるために、以下に基づいてクエリにピクセルを追加することがあります。 min-width:
@media (max-width: 320px){ /* styles for viewports = 321px */ }これにより、ビューポートの幅が 320pxの間の任意のビューポート幅 320px & 321px どちらのクエリのスタイルも適用されない非常に小さなゾーンになります。奇妙な「スタイルのないコンテンツのフラッシュ」状況です。
XNUMX つの解決策は、XNUMX 番目の比較スケール値 (小数点以下の数値) を 320.01px:
@media (max-width: 320px) { /* styles for viewports = 320.01px */ }しかし、それはばかげて過度に複雑になっています。 そのため、新しいメディア機能範囲構文がより適切なアプローチです。
@media (width <= 320px) { /* styles for viewports 320px) { /* styles for viewports > 320px */ }包み込む
CSS メディア クエリでビューポート幅の範囲をターゲットにするための新しい構文について、多くのことを説明しました。 メディア クエリ レベル 4 仕様で構文が導入され、Firefox および Chromium ブラウザーで採用されたので、新しい比較演算子を使用して、それらを他の範囲メディア機能と組み合わせることができるようになりつつあります。 width、のような height & aspect-ratio
これは、レベル 4 仕様で導入された新しい機能の XNUMX つにすぎません。 ユーザーの好みに基づいて作成できる一連のクエリ. それだけではありません！ チェックアウト CSS メディア クエリの完全ガイド のこっそりのピークのために メディア クエリ レベル 5 に含まれる可能性があるもの.
