ATOZ CSS：メディアクエリを使用してレスポンシブデザインを作成します

キーポイント

レスポンシブデザインを作成するときは、デバイス固有のブレークポイントを使用しないでください。代わりに、ほとんどの携帯電話、タブレット、デスクトップ/ラップトップデバイスのサイズの主要なブレークポイントとセカンダリ微調整ポイントを設定します。
より良いスケーラビリティを得るために、Pixelsの代わりにBreakpointユニットとしてEMまたはREMを使用します。これは、ユーザーがページを拡大したり、テキストサイズを増やしたりした場合に役立ちます。
CSSメディアクエリは、レスポンシブデザインを作成するための強力なツールです。さまざまな画面サイズのさまざまなデバイスに異なるスタイルを適用することができます。ただし、それらを使用して特定のデバイスを見つけることは避けてください。これにより、メンテナンスの悪夢につながる可能性があるためです。代わりに、すべての画面サイズで機能するレスポンシブデザインの作成に焦点を当てます。

この記事は、ATOZ CSSシリーズの一部です。ここでは、メディアクエリの完全なスクリーンショットとトランスクリプトをご覧ください。

ATOZ CSSシリーズへようこそ！このシリーズでは、それぞれがアルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を探索します。スクリーンショットでは不十分な場合があることがわかっているため、この記事では、メディアクエリに関する新しいクイックヒント/コースを追加しました。

m代表的なメディアクエリ

Webデザイナーと開発者の大多数は、レスポンシブデザインの概念に精通していると思います。そうでない場合は、メディアクエリのスクリーンショットを確認してください。

レスポンシブデザインは非常に人気があるため、さまざまなデバイスのウェブサイトやアプリケーションを開発する方法を改善できるヒントを学ぶのに最適な場所です。ここにあなたを助けるためのいくつかのCSSのヒントがあります。

ヒント1：特定のデバイスにブレークポイントを使用しないでください

これが言うまでもないことを願っていますが、リマインダーが必要な場合、または以前にそのようなベストプラクティスに遭遇したことがない場合に備えて、繰り返します。

以下に示すように、特定のデバイスのブレークポイントは、メディアクエリを介してコードで簡単に識別されます（明確にするためのコメントを追加）：

これらのブレークポイントはAppleデバイス用に設定されており、768pxや1024pxなどの「マジック番号」値を持っています。

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

ユーザーのウィンドウが1025pxまたは1023pxの場合はどうなりますか？

メディアクエリは有効になり、デバイスサイズのスタイルは適用されません。

ブレークポイントに非常に具体的な値が必要になる場合がありますが（これについては後で詳しく説明します）、これらの特定のデバイスのブレークポイントを見ることはコード臭いであるように思えます。

それで、あなたは何をすべきですか？

テクニック2：メイン

ブレークポイントとセカンダリ微調整ポイント レスポンシブプロジェクトに取り組むとき、私はほとんどの携帯電話、タブレット、デスクトップ/ラップトップデバイスの規模の任意の整数ブレークポイントを設定する傾向があります。

私は次のメインブレークポイントを使用する傾向があります（ただし、これはプロジェクトによって異なる場合があります）：

<code>/* ipad 纵向 */
@media screen and (min-width: 768px;) {}

/* ipad 横向 */
@media screen and (min-width: 1024px;) {}

/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}</code>

これらのブレークポイントを使用すると、これらのポイントでのみ変更するように設計を制限するのではなく、3つの主要なデバイスタイプを使用するための優れた基盤を提供します。

コンテンツベースのデザインの調整（つまり、コンテンツが損傷している、不均衡、またはうまくフィットしないようになったとき）の場合、微調整ポイントを使用して要素を調整し、プロジェクトの詳細を磨くことができます。

<code>/* 大手机和小平板 */
@media screen and (min-width: 500px;) {}

/* 平板电脑和小显示器 */
@media screen and (min-width: 800px;) {}

/* 笔记本电脑和台式机 */
@media screen and (min-width: 1200px;) {}</code>

ヒント3：BreakPointユニットとしてEMまたはREMを使用してください

PXを使用しないでください。これらの相対ユニットのいずれかを使用して、ユーザーがページをスケーリングしたり、テキストサイズを増やしたりすると、より良いスケーラビリティを得ることができます。たとえば、EMユニットを使用してサイズを変更する場合、上記のメインブレークポイントは次のとおりです。

CSSメディアクエリとブレークポイント（FAQ）

に関するFAQ

<code>/* 调整共享按钮的位置 */
@media screen and (min-width: 1150px;) {
  margin-right: 1em;
}</code>

CSSブレークポイントを設定するためのベストプラクティスは何ですか？

CSSブレークポイントは、レスポンシブデザインを作成するために不可欠です。事前定義されたポイントでレイアウトを変更することを可能にします。つまり、さまざまな画面サイズに異なるレイアウトを提供します。 CSSブレークポイントを設定するためのベストプラクティスには、最初に移動するレイアウトから開始してから、段階的に上方に作業することが含まれます。また、より柔軟でアクセスしやすいため、ピクセルの代わりにPixelsの代わりにEMまたはREMユニットを使用することもお勧めします。最後に、あまりにも多くのブレークポイントを使用しないでください。モバイルデバイス、タブレット、デスクトップの標準サイズに固執します。

レスポンシブデザインにCSSメディアクエリを使用する方法は？

CSSメディアクエリは、レスポンシブデザインを作成するための強力なツールです。さまざまな画面サイズのさまざまなデバイスに異なるスタイルを適用することができます。 ルール、メディアを使用して、

や

などの条件、および適用するCSSスタイルを使用して、CSSで使用できます。 @media max-widthmin-widthレスポンシブデザインの標準的なCSSブレークポイントは何ですか？

レスポンシブデザインの標準CSSブレークポイントは通常、次のとおりです。モバイルデバイスでは320px、タブレットでは768px、タブレットでは1024px、大きなデスクトップで1200pxです。ただし、これらは厳格な規制ではなく、設計の特定のニーズに従って調整できます。

CSSブレークポイントをテストする方法は？

ブラウザのチェックツールを使用して、CSSブレークポイントをテストできます。このツールを使用すると、さまざまな画面サイズをシミュレートし、レイアウトの応答方法を確認できます。さらに、BrowserStackやResponsive Design Testing Webサイトなどのオンラインツールを使用して、さまざまなデバイスや画面解像度でテストできます。

CSSメディアクエリを使用して特定のデバイスを見つけることはできますか？

はい、CSSメディアクエリを使用して特定のデバイスを見つけることができます。ただし、これは通常、メンテナンスの悪夢につながる可能性があるため推奨されません。代わりに、すべての画面サイズで機能するレスポンシブデザインの作成に焦点を当てます。

CSSメディアクエリを使用してフォントサイズを変更する方法は？

CSSメディアクエリを使用して、画面サイズに基づいてフォントサイズを変更できます。たとえば、読みやすくするために、より大きな画面にフォントサイズを追加することをお勧めします。これを行うには、目的の画面サイズを使用してメディアクエリを定義し、新しいフォントサイズを設定します。

CSSメディアクエリのmin-widthとmax-widthの違いは何ですか？

CSSメディアクエリでは、

およびmin-widthinmax-widthinmin-widthでは、メディアクエリ内のスタイルが適用される最小および最大ビューポートサイズを指します。 max-widthは、指定された値よりも大きいビューポートサイズにスタイルを適用するために使用されますが、

は、指定された値以下のビューポートサイズにスタイルを適用するために使用されます。

JavaScriptでCSSメディアクエリを使用できますか？

window.matchMedia()はい、MediaQueryListメソッドを使用して、JavaScriptを使用してCSSメディアクエリを使用できます。このメソッドは、指定されたCSSメディアクエリ文字列の結果を表す

オブジェクトを返します。これは、画面サイズに基づいてさまざまなJavaScript機能を適用するために使用できます。

CSSメディアクエリを使用して高解像度画面を処理する方法は？

解像度のメディア機能を使用して、CSSメディアクエリを使用して高解像度画面を処理できます。この機能により、画面のピクセル密度に基づいてスタイルを適用できます。たとえば、高密度画面に高解像度の画像を提供して、シャープでシャープに見えるようにすることをお勧めします。

CSSメディアクエリを使用してダークモードを検出できますか？

prefers-color-schemeはい、CSSメディアクエリを使用して、ユーザーがシステムをダークモードに設定しているかどうかを検出できます。これを実現するために

メディア機能を使用できます。この機能により、ユーザーの好みの配色（つまり、明るい色または暗い色）に従ってさまざまなスタイルを適用できます。

以上がATOZ CSS：メディアクエリを使用してレスポンシブデザインを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。