CSSメディアクエリガイド

CSSメディアクエリは、特定の機能、関数、およびユーザー設定に基づいてブラウザを見つける手法であり、これらの機能に基づいてスタイルを適用するか、他のコードを実行します。おそらく、世界で最も一般的なメディアクエリは、特定のビューポートの範囲をターゲットにし、カスタムスタイルを適用するものであり、レスポンシブデザインの概念全体を生み出しました。

 /*ブラウザの幅が少なくとも600px以上の場合*/
@media画面と（min-width：600px）{
  。要素 {
    /*いくつかのスタイルを適用*/
  }
}

Viewport幅に加えて、他の多くの側面を配置できます。これは、画面解像度、デバイスの向き、オペレーティングシステムの設定、さらにはクエリと使用に使用できる他の要因のセットでもあります。

携帯電話、タブレット、ラップトップなどの標準的なデバイスのビューポートに基づいて、メディアクエリのリストをすばやく表示したいですか？コードスニペットのセットをチェックしてください。

メディアクエリを使用します

メディアクエリは通常CSSに関連付けられていますが、HTMLおよびJavaScriptでも使用できます。

HTML

HTMLでメディアクエリを直接使用する方法はいくつかあります。

<link>要素はドキュメントに直接配置できます。この例では、さまざまなビューポートサイズに異なるスタイルシートを使用することをブラウザに伝えます。

<link href="all.css" media="all" rel="stylesheet">
<link href="small.css" media="(min-width: 20em)" rel="stylesheet">
<link href="medium.css" media="(min-width: 64em)" rel="stylesheet">
<link href="large.css" media="(min-width: 90em)" rel="stylesheet">
<link href="extra-large.css" media="(min-width: 120em)" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

なぜこれをするのですか？これは、ダウンロードとサービスが必要なデバイスに適合する方法でスタイルを分割することにより、Webサイトのパフォーマンスを微調整する素晴らしい方法です。

しかし、これにより、これらのメディアクエリと一致しないStyleSheetのダウンロードを常に防ぐとは限らないことは明らかであり、単に負荷の優先度を低く割り当てます。

したがって、電話のような小さな画面デバイスがWebサイトにアクセスした場合、ビューポートサイズに一致するメディアクエリのスタイルシートのみをダウンロードします。ただし、大きなデスクトップ画面が表示されると、これらすべてのクエリと一致するため、すべてのスタイルシートがダウンロードされます（この特定の例では、印刷クエリを減算します）。

これは公正です<link>要素。 Responsive Image Guideが説明しているように、Mediaクエリを要素に使用できます。これは、一連の画像オプションから使用する画像のバージョンを要素ブラウザーに伝えることができます。

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174353857438221.png" class="lazy" alt="CSSメディアクエリガイド">

繰り返しますが、これはパフォーマンスを大幅に向上させることができます。小さなデバイスに小さな画像を提供できるため、これはおそらく（常にではない）データ計画によって制限される可能性のある低電力デバイスです。

忘れないでください、私たちは直接入ることもできます<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="CSSメディアクエリガイド" >要素でメディアクエリを使用します。

<img src="/static/imghw/default1.png" data-src="cat.png" class="lazy" alt="CSSメディアクエリガイド" srcset="cat-small.png 300w, cat-medium.png 600w, cat-large.png 1200w" sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px">

CSS

同様に、CSSは、実際のアプリケーションでメディアクエリを見つける最も一般的な場所です。それらは、StyleSheetの@mediaルールに直接位置しています。これは、ブラウザがこれらの条件と一致するときに条件を使用して要素をラップして、スタイルのセットがいつ、どこで適用されるかを決定します。

 /*幅320pxから480pxの幅の表示*/
@mediaのみの画面と（min-device-width：320px）および（max-device-width：480px）{
  .card {
    背景：＃bada55;
  }
}

インポートされたStyleSheetをスコープすることもできますが、一般的なルールとして、パフォーマンスが低いため、 @importの使用を避ける必要があります。

 /* @importをできるだけ使用しないでください！ */

/*すべての画面の基本スタイル*/
@import url（ "style.css"）画面;
/*ポートレートのスタイル（狭い）方向スクリーン*/
@import url（ 'landscape.css'）画面と（オリエンテーション：ポートレート）;
/*印刷スタイル*/
@import url（ "print.css"）print;

JavaScript

JavaScriptでメディアクエリを使用することもできます！何だと思う？彼らはCSSのものと非常に同様に働いています。違いは？最初にwindow.matchMedia()メソッドを使用して、条件を定義します。

したがって、ブラウザの幅が少なくとも768pxの場合、コンソールにメッセージをログに記録する必要があるとします。 matchMedia()を呼び出し、画面幅を定義する定数を作成できます。

 //少なくとも768px const mediaquery = windo.matchmedia（ '（min-width：768px）'）のwidthのviewportsのメディア条件を作成します。

次に、この状態が満たされたら、レコードをコンソールにトリガーできます。

 //少なくとも768px const mediaquery = windo.matchmedia（ '（min-width：768px）'）のwidthのviewportsのメディア条件を作成します。

//「mediaquery.matches）{`matches`プロパティに注意してください{
  console.log（ 'メディアクエリマッチ！'）;
}

残念ながら、これは一度だけ発射されるため、アラームがオフになった場合、画面の幅を変更してリフレッシュせずに再試行しても、再び発火しません。これが、リスナーを使用してアップデートをチェックするのが最善である理由です。

 //少なくとも768px const Mediaquery = window.matchmedia（ '（min-width：768px）'）の幅のビューポート用の条件を作成します。

function handletabletchange（e）{
  //メディアクエリがtrueであるかどうかを確認します（e.matches）{
    //次に、次のメッセージをConsole.logにログにします（ 'Media Query Match！'）;
  }
}

//イベントリスナーMediaQuery.AddListener（HandleTablethange）を登録します。

//初期チェックHandletablethange（MediaQuery）;

Marko Ilicの「JavaScript Media Queryの使用」に関する記事の完全な記事をご覧ください。これには、メディアクエリを使用して古いJavaScriptメソッドの比較を使用します（ resizeイベントリスナーのバインド、 window.innerWidthまたはwindow.innerHeightが変更されます）。

###メディアクエリの構造

メディアクエリを使用できる場所の例をいくつか見たので、それらを分解して、実際に何をしているのかを見てみましょう。

@メディア

@media [media-type]（[media-feature]）{
  /*スタイル！ */
}

メディアクエリレシピの最初の成分は、 @mediaルール自体であり、これは多くのCSS AT-Ruleの1つです。なぜ@mediaそんなに注目を集めるのですか？ Webサイトの視聴に使用されるメディアのタイプ、そのメディアタイプでサポートされる機能、および組み合わせてシンプルで複雑な条件を組み合わせて一致させることができるオペレーターをターゲットにするためです。

メディアタイプ

@media画面{
  /*スタイル！ */
}

どのタイプのメディアを見つけようとしていますか？多くの場合、ほとんどではないにしても、ここにscreen値が表示されます。これは理にかなっています。これは、私たちが一致させようとしているメディアタイプの多くは、画面接続のあるデバイスです。

しかし、私たちが見つけることができるメディアタイプは確かに画面だけではありません。以下を含むいくつかがあります

• all ：すべてのデバイスを一致させます
• print ：印刷プレビューで表示されているドキュメントまたは、コンテンツを印刷するように設計されたページに分割するメディアに一致します。
• screen ：画面でデバイスを一致させます
• speech ：スクリーンリーダーなど、コンテンツを健全な方法で読み取るデバイスと一致します。セルフメディアクエリレベル4以来、これは現在廃止されたauralタイプに取って代わりました。

画面上の印刷スタイルをプレビューするには、すべての主要なブラウザを使用して、印刷スタイルのシートの出力をシミュレートすることができます。他のメディアタイプ（ tty 、 tv 、 projection 、 handheld 、 braille 、 embossed 、 auralなど）は廃止されており、仕様はブラウザーがそれらを認識することを推奨し続けていますが、空であると評価する必要があります。これらのいずれかを使用している場合は、最新のアプローチに変更することを検討してください。

メディア機能

一致するようにメディアタイプを定義したら、それに合わせて機能を定義し始めることができます。画面が幅に合わせて一致する多くの例を見てきました。ここでは、 screenがタイプであり、 min-widthとmax-width特定の値を持つプロパティです。

しかし、私たちが一致させることができる多くの（多くの）「機能」があります！メディアクエリレベル5は、メディア機能を6つのカテゴリに分類します。

ビューポート/ページ機能

品質を表示します

色

交流

ビデオプレフィックス

仕様は、テレビを含むユーザーエージェントを参照して、それぞれ独自の特性を持つ2つの飛行機にビデオとグラフィックを提示します。次の特徴は、これらの飛行機を説明しています。

スクリプト

ユーザーの設定

非推奨

オペレーター

メディアクエリは、特定の条件に基づいてメディアタイプを一致させることができるように、多くのプログラミング言語で論理演算子をサポートします。 @mediaルール自体は、基本的に「次のタイプと属性が一致する」と宣言する論理演算子であり、いくつかの操作を実行します。

そして

ただし、特定の幅の範囲内で画面を見つけたい場合は、 and使用できます。

 /* 320pxから768pxの幅で画面を一致させる*/
@mediaスクリーン（min-width：320px）および（max-width：768px）{
  。要素 {
    /*スタイル！ */
  }
}

または（またはコンマ分離）

また、さまざまな機能を一致させるために、 orオペレーターとしてコンマ区切りの機能を使用することもできます。

 /*
  少なくとも1200pxのダークモードまたは画面幅に対するユーザーの好みに一致します*/
@mediaスクリーン（color-scheme：dark）、（min-width：1200px）{
  。要素 {
    /*スタイル！ */
  }
}

ない

たぶん、デバイスがサポートしていない、または一致しないものによってデバイスを見つけたいと思うかもしれません。このステートメントは、デバイスがプリンターであり、1つの色のみを表示できる場合、ボディの背景色を削除します。

 @media print and（not（color）））{
  体 {
    背景色：なし;
  }
}

より深く理解したいですか？ Media Query Syntaxに従うより多くの例については、DigitalOcean Communityの「CSSメディアクエリ：クイックリファレンスとガイド」をご覧ください。

CSSメディアクエリが本当に必要ですか？

メディアクエリは、エキサイティングな隠された宝石を備えたCSSツールボックスの強力なツールです。しかし、各状況の設計に適応すると、維持するために過度に複雑なコードベースになります。私たち全員が知っているように、CSSはクマの子のようなものです。

だからこそ、「具体的に適応または設計することなく、できるだけすべての人が使用する製品を設計する」ことであるラナルドメイスのユニバーサルデザイン哲学をフォローすることをお勧めします。

「誰もがアクセスできる」では、ローラ・カルバッグは、アクセシビリティとユニバーサルデザインの違いは微妙だが重要だと説明しています。アクセス可能なデザイナーは、車椅子ユーザーがアクセスできる大規模なドアを作成しますが、一般的なデザイナーは、能力に関係なく、誰でも適応できる入り口を作成します。

私はウェブ上のユニバーサルデザインについて話すのは難しいことを知っていますが、それはほとんどユートピア的に聞こえますが、それについて考えてください、約150の異なるブラウザー、ユーザー設定の約50の異なる組み合わせがあり、前述したように、Androidデバイスだけに24,000を超える異なるデバイスがあります。

これは、コンテンツを表示する可能性のある少なくとも1800万の可能なシナリオを意味します。素晴らしいミリアム・スザンヌの言葉では、「 CSSは、オペレーティングシステム、インターフェイス、言語の未知のコンテンツのグラフィックデザインを無限で未知のキャンバスでグラフィックデザインにしようとしています。

これが仮定が非常に危険な理由です。そのため、製品を設計、開発、検討するとき、仮定を脇に置いて、メディアクエリを使用して、コンテンツが連絡先やユーザーの前で正しく表示されるようにします。

値の一致範囲

width 、 height 、 color 、 color-indexなど、前のセクションで概説されている多くのメディア機能には、最小または最大の制約を表すために、 min-またはmax-をプレフィックスできます。多くの例でこれらの使用法を見てきましたが、重要なのは、特定の値を宣言することなく一致する範囲の値を作成できることです。

次のコードスニペットでは、ビューポート幅が30EMを超え、80EM未満の場合、ボディの背景色を紫に設定します。ビューポート幅が値の範囲と一致しない場合、それは白に戻ります。

体 {
  バックグラウンドカラー：#fff;
}

@media（min-width：30em）および（max-width：80em）{
  体 {
    背景色：紫。
  }
}

メディアクエリレベル4はless than( <code>equals(=)演算子を使用して、新しい簡略化された構文を指定します。したがって、最後の例は、次のように新しい構文に変換できます。

 @media（width> = 30em）および（width <p></p><h3 id="ネストされた複雑な意思決定">ネストされた複雑な意思決定</h3><p></p><p>CSSを使用すると、括弧を使用してAT-Ruleまたはグループステートメントをネストすることができ、複雑な操作を深く評価することができます。</p><pre class="brush:php;toolbar:false"> @media（min-width：20em）、すべてではありません（min-height：40em）{  
  @mediaはすべてではありません（pointer：none）{...}
  @media screen and（（min-width：50em）and（Orientation：landscape））、print and（not（color））{...}
}

注意深い！強力で複雑な表現を作成できたとしても、非常にarbitrary意的で、クエリを維持するのが難しい場合があります。ブラッド・フロストが言うように、「私たちのインターフェイスがより複雑になればなるほど、それらを適切に維持するために考えなければなりません。」

補助機能

メディアクエリレベル4に追加された機能の多くは、アクセシビリティに焦点を当てています。

還元運動を好む

prefers-reduced-motionユーザーがモーション選好を削減し、動きとアニメーションの数を最小限に抑えたかどうかを検出します。 2つの値が必要です。

 <code>- no-preference：指示用户没有向系统告知任何偏好。 - reduce：指示用户已通知系统他们更喜欢最大限度地减少移动或动画数量的界面，最好是消除所有非必要的移动。此偏好通常由患有前庭障碍或眩晕症的人使用，其中不同的运动会导致失去平衡、偏头痛、恶心或听力损失。如果您曾经尝试快速旋转并感到头晕，您就会知道感觉如何。在Eric Bailey 的一篇精彩文章中，他建议使用以下代码停止所有动画： ```css @media screen and (prefers-reduced-motion: reduce) { * { /* 非常短的持续时间意味着依赖事件的JavaScript 仍然有效*/ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }</code>

Bootstrapなどの一般的なフレームワークには、デフォルトでこの機能があります。私の意見では、 prefers-reduced-motionを使用しない理由はありません - それを使用するだけです。

コントラストを好む

prefers-contrast機能は、コントラストを増やすか減少させるために、好みとブラウザの設定が選択されているかどうかをユーザーに伝えます。 3つの値が必要です。

• ノープレファレンス：ユーザーがシステムに設定を通知しない場合。ブール値として使用すると、 falseと評価されます。
• 高：ユーザーがより高いコントラストレベルを表示するように選択したとき。
• 低：ユーザーがより低いコントラストレベルを表示するように選択したとき。

執筆時点では、この機能はブラウザによってサポートされていません。 Microsoftは-ms-high-contrast標準の初期実装を使用して、Microsoft Edge V18以前のみでのみ利用可能です（ただし、Chromiumベースのバージョンは含まれていません）。

 。ボタン {
  バックグラウンドカラー：＃0958d8;
  色：#ffff;
}

@media（creters-contrast：high）{
  。ボタン {
    バックグラウンドカラー：＃0A0DB7;
  }
}

この例では、ユーザーがコントラストを高めると、AAからAAへのbuttonクラスのコントラストが発生します。

逆色

inverted-colors特徴は、システムの設定またはブラウザの設定で逆転するように色が選択されているかどうかをユーザーに伝えます。このオプションは、高いコントラストの代替として使用される場合があります。 2つの値が必要です。

• なし：色が正常に表示される場合
• 反転：ユーザーが反転カラーオプションを選択したとき

色を反転させる問題は、画像とビデオの色を反転させ、X線画像のように見えることです。 CSS invertフィルターを使用することにより、すべての画像とビデオを選択して反転させることができます。

 @media（逆色）{
  IMG、ビデオ{ 
    フィルター：反転（100％）;
  }
}

執筆時点では、この機能はSafariによってのみサポートされています。

カラーシェームを好む

今日、私たちはますます「ダークモード」の配色を見ています。 prefers-color-scheme機能のおかげで、ユーザーのシステムまたはブラウザの好みを活用して、好みに基づいて「暗い」テーマを提供するか「明るい」テーマを提供する必要があるかを判断できます。

2つの値が必要です。

• 光：ユーザーを選択すると、光のテーマを好むか、アクティビティの好みがありません
• 暗い：ユーザーが設定でダークディスプレイを選択したとき

体 {
  -bg-color：白; 
   - テキストカラー：黒;

  バックグラウンドカラー：var（ -  bg-color）;
  色：var（ - テキストカラー）;
}

@mediaスクリーンと（color-scheme：dark）{
  体 {
    -bg-color：黒;
     - テキストカラー：白。
  }
}

Adhuhamがダークモードに関する完全なガイドで説明しているように、背景の色を変えるだけではありません。ダークモードの使用を開始する前に、非常にスマートな実装戦略がない場合は、維持が難しい非常に困難なコードベースになる可能性があることを忘れないでください。 CSS変数はこれに対して驚異をもたらす可能性がありますが、これは別の投稿の主題になります。

将来の見通し

メディアクエリレベル5は現在、作業ドラフト状態にあります。つまり、現在の間に多くの変更が発生する可能性があり、提案になります。しかし、画面を配置してデザインを非常に特定の条件に適応させる新しい方法を開くため、言及する価値のあるいくつかの興味深い機能が含まれています。

ユーザー優先メディア機能

ねえ、最後のセクションでこれらを紹介しました！よし。これらの機能は、ユーザーエージェントレベルであろうとオペレーティングシステムレベルからのものであろうと、ユーザーの実際の設定によって通知されるため、エキサイティングです。

必須のカラーパレットを検出します

これは非常に簡単です。一部のブラウザは、スタイルをレンダリングするために利用可能な利用可能な色の数を制限しています。これは「強制色モード」と呼ばれ、ブラウザ設定で有効になっている場合、ユーザーはページで限られた色のセットを使用することを選択できます。したがって、ユーザーは色の組み合わせとコントラストを定義して、コンテンツを読みやすくすることができます。

forced-colors機能により、 active値を使用して、必須のカラーパレットが使用されているかどうかを検出できます。一致する場合、ブラウザはCSSシステムの色を介して必要なパレットを提供する必要があります。また、ブラウザは、ページの背景色が明るいか暗いか、必要に応じてページを調整できるように対応するprefers-color-schemeをトリガーするかどうかを決定することもできます。

最大輝度、色深度、コントラスト比を検出します

一部のデバイス（およびブラウザ）は、非常に明るいディスプレイを表示し、色の幅広い色とコントラストの比率を示しています。これらのデバイスを使用してこれらのデバイスを検出できます。 dynamic-range highがこれらのデバイスと一致し、 standard他のすべてのデバイスと一致します。

これの変化が見られるかもしれませんが、今のところ、高い明るさとコントラストを構成する測定についてはまだ不確実性があります。ブラウザはこの決定を下すかもしれません。

ビデオプレフィックスの特性

仕様では、画面上の他の要素からビデオフレームを区別する方法である可能性のある別の「飛行機」にビデオとグラフィックを表示できるいくつかの画面（テレビなど）について説明します。したがって、メディアクエリレベル5は、色域やダイナミックレンジなどのビデオ機能を検出するために設計された新しいメディア機能のセットを提案しています。

ビデオの高さ、幅、解像度の検出に関する提案もありますが、ju審員は、これらがビデオを解決するための正しい方法であるかどうかをまだ議論しています。

ブラウザのサポート

この記事を読むときにこの機能のブラウザのサポートが変更される可能性があるため、ブラウザは常に進化しています。MDN更新されたブラウザー互換性テーブルを確認してください。

コンテナクエリの手順

ブラウザのサイズではなく、自分のサイズに従ってコンポーネントを調整できる場合、それはクールではないでしょうか？これは、CSSコンテナクエリの概念です。現在、メディアクエリを通じてこれらの変更を行うためのブラウザ画面のみがあります。

ビューポートは常に要素自体のサイズに直接関係しているとは限らないため、これは残念です。ウェブサイト上のさまざまなコンテキストでレンダリングされたウィジェットを想像してください。時にはサイドバーで、時には全幅のフッターで、時には不明な列のあるグリッドにあります。

これは、コンテナクエリが解決しようとしている問題です。理想的には、ビューポートのサイズではなく、要素自体のサイズに応じて要素のスタイルを調整できます。 Chrome 105は、CSSコンテナクエリのサポートをリリースします。 Safari 16.1についても同じことが言えます。執筆時点で、私たちが本当に待っているのは、Firefoxの広範なサポートです。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

＃＃＃ 例

いくつかのメディアクエリの例を見てみましょう。メディアタイプ、機能、およびオペレーターの非常に多くの組み合わせにより、表示できる可能性の数は徹底的です。代わりに、特定のメディア機能に基づいていくつかを強調します。

さまざまなビューポート幅でレイアウトを調整します

詳細情報

これはおそらく最も広く使用されているメディア機能です。 Scrollbarを含むビューポートの幅をブラウザに伝えます。イーサンマルコットの有名なレスポンシブデザインのCSS実装のロックを解除します。これは、流体メッシュ、柔軟な画像、レスポンシブタイポグラフィを組み合わせてビューポートサイズに応答するデザインプロセスです。

その後、Luke Wroblewskiは、モバイルの優先度という用語を導入し、デザイナーと開発者が最初に小さな画面エクスペリエンスから始めて、画面幅とデバイス機能が拡大するにつれて徐々にエクスペリエンスを向上させることを奨励し、レスポンシブデザインの概念を開発しました。

通常、モバイルの優先度はmax-widthではなくmin-widthを使用することで見つけることができます。私たちがmin-widthから始めるなら、私たちは基本的に「ねえ、ブラウザー、ここからワークアップ」と言っています。一方、 max-width 、より大きな画面に優先順位を付けるようなものです。

ブレークポイントを幅で定義する1つの方法は、iPhoneの正確なピクセル幅など、標準デバイスのサイズを使用することです。しかし、多くの（多くの）異なる携帯電話、タブレット、ラップトップ、デスクトップがあります。 Androidだけを見ると、2015年8月の時点で、ビューポートサイズ、解像度、オペレーティングシステム、ブラウザの24,000を超えるバリエーションがありました。

そのため、特定のデバイスの正確な幅はトラブルシューティングや1回限りの修正に役立つ場合がありますが、これはレスポンシブアーキテクチャを維持するための最も信頼できるソリューションではない場合があります。これは決して新しいアイデアではありません。 Brad Frostは、2013年の投稿「7習慣の効率的なメディアクエリ」で、コンテンツ（デバイスではなく）をブレークポイントを決定させる利点をすでに促進しています。

メディアクエリは依然としてレスポンシブインターフェイスを作成するための効果的なツールですが、多くの場合、幅は完全に回避できます。最新のCSSを使用すると、CSSグリッドを使用して柔軟なレイアウトを作成し、ブレークポイントを追加せずにコンテンツをビューポートサイズに適応させるフレックスを作成できます。たとえば、これはメディアクエリなしで列の数を調整するグリッドレイアウトです。

 。容器 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（auto-fill、minmax（200px、1fr））;
}

幅を超えて考えることについての多くの記事があります。数年前にこれを書きました。「CSSの1行における10のモダンなレイアウト」と呼ばれるUna Kravetの記事をチェックすることをお勧めします。

####ダークモード

詳細情報

この例は、ネットワーク上のダークモードに関するガイドから直接取得します。アイデアは、 prefers-color-scheme機能を使用して、ユーザーのシステム設定が明るいモードまたはダークモードで構成されているかどうかを検出し、レンダリングされたUIの代替色のセットを定義できることです。

この手法とCSSカスタムプロパティを組み合わせることで、それらは一度だけ定義する必要がある変数のようなものであり、コード全体で使用する必要があるため、物事が簡単になります。色を交換する必要がありますか？カスタムプロパティ値を変更すると、どこでも更新されます。これはまさにprefers-color-schemeです。色のセットをカスタムプロパティとして定義し、ユーザー設定に基づいて色を変更するprefer-color-scheme属性を使用してメディアクエリでそれらを再定義します。

####レスポンシブカードライブラリでの方向、ホバー、および動きを検出する

詳細情報

このギャラリーは応答性が高く、幅の機能を使用する必要はありません。

ビューポートの向きを検出します。ポートレートビューポートの場合、サイドバーがタイトルになります。それが風景の場合、それは脇に残ります。

pointerメディア機能を使用すると、メインの入力デバイスが粗い（指など）か（マウスカーソルなど）、チェックボックスのクリック可能な領域のサイズを設定するかどうかを判断します。

次に、 hoverメディア機能を使用して、この例では、デバイスがホバー（マウスカーソルなど）ができるかどうかを確認し、各カードにチェックボックスを表示します。

prefers-reduced-motionがreduceように設定されている場合、アニメーションは削除されます。

何かに気づきましたか？実際のレイアウトとカードのサイズには実際にはメディアクエリを使用していません！これは、 .container要素のminmax()関数を使用して処理され、レスポンシブデザインが常にメディアクエリを使用することを意味するとは限りません。

要するに、これは幅を測定したり、仮定を立てることなく、完全に応答性の高いアプリケーションです。

#### iPhoneのランドスケープモードでの配置

/* iPhone Xランドスケープモード*/
@mediaのみの画面 
  および（Min-Device-Width：375px） 
  および（Max-Device-Width：812px） 
  および（-webkit-min-device-pixel-ratio：3）
  および（オリエンテーション：風景）{ 
  /*スタイル！ */
}

詳細情報

orientationメディア特性は、デバイスが広い方向（横方向）で回転するか、高方向（垂直方向）で回転するかをテストします。

メディアクエリはどのデバイスが使用されているかを正確に知りませんが、特定のデバイスの正確なサイズを使用できます。上記のコードスニペットは、iPhone Xを対象としています。

####大規模なビューポートにスティッキータイトルを適用します

詳細情報

上記の例では、 height使用して固定要素を分離し、画面が短すぎるときに画面スペースを取りすぎないようにします。画面が高い場合、水平ナビゲーションバーは固定位置にありますが、より短い画面でそれ自体を分離します。

width特徴と同様に、 height Scrollbarを含むビューポートの高さを検出します。私たちの多くは、狭いビューポートを備えた小さなデバイスでWebページを閲覧しているため、さまざまな高さの設計がこれまで以上に重要になります。 Anthony Colangeloは、Appleが意味のある方法でheightメディア機能を使用して、ビューポートの高さが変化したときにヒーローイメージのサイズを処理する方法を説明しています。

#### Responsive（Fluid）Tapeetting

詳細情報

表示された画面の画面サイズに応じて、フォントは大きすぎたり小さすぎたりする場合があります。小さな画面で作業している場合、大画面で使用されている画面よりも小さいフォントを使用したいと思うでしょう。

ここでのアイデアは、ブラウザの幅を使用してフォントサイズをスケーリングするということです。私たちはいますデフォルトのフォントサイズを「小」フォントサイズとして設定し、メディアクエリを「大型」フォントサイズとして使用して別のフォントサイズを設定します。真ん中に？フォントサイズを再度設定しますが、ブラウザの幅に基づいてサイズを計算する別のメディアクエリで。

これの美しさは、ブラウザの幅に応じてフォントサイズを調整できるようにすることですが、特定のサイズを超えたり下落したりすることはありません。ただし、 min() 、 max() 、 clamp()などの新しいCSS機能のおかげで、メディアクエリなしでこれを行う簡単な方法があります。

####は、デバイスに厚いポインターがある場合、より大きなタッチターゲットを提供します

詳細情報

スーパー小さなボタンのあるウェブサイトにアクセスしたことがありますか？私たちの中には、厚い指を持っている人もいれば、誤って何か他のものをクリックせずにオブジェクトを正確にクリックするのは困難です。

もちろん、 width機能に頼って小さな画面で作業しているかどうかを判断することもできますが、デバイスが要素の上にホバリングできるかどうかを検出することもできます。そうでない場合は、タッチデバイスであるか、Microsoft Surfaceなどの両方のデバイスをサポートするデバイスである可能性があります。

上記のデモでは、例としてチェックボックスを使用しています。小さな画面でチェックボックスを表示すると、チェックボックスをクリックするのが難しい場合があるため、デバイスがホバーイベントの実行に失敗した場合、サイズを増やし、ホバーする必要はありません。

繰り返しますが、このアプローチは常に正確ではありません。 hover 、 pointer 、 any-hover 、およびany-pointer使用するときに発生する可能性のある問題に関するPatrick Laukeの詳細な記事をご覧ください。

＃＃＃ 仕様

• メディアクエリレベル4（推奨される推奨事項）
• メディアクエリレベル5（ワーキングドラフト）

このガイドのレビューを手伝ってくれたサラ・ランバッハーに感謝します。

以上がCSSメディアクエリガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。