CSSはメディアクエリに相対単位を使用します（例の紹介）-CSSチュートリアル-php.cn

CSSはメディアクエリに相対単位を使用します（例の紹介）

青灯夜游

リリース： 2018-11-09 14:26:21

オリジナル

3343 人が閲覧しました

この記事では、CSS でのメディアクエリの相対単位の使用法 (導入例) を紹介し、メディアクエリに相対単位を使用できる理由とその利点を誰もが理解できるようにします。困っている友人は参考にしていただければ幸いです。

メディアクエリに相対単位を使用する

メディアクエリで定義された幅はブレークポイントと呼ばれます。この点は、利用可能なスペースに最適な方法で選択内容によって調整されます。これは、一般的なデバイスのターゲット幅に基づく一般的なアプローチでしたが、現在では多数の画面サイズが利用できるため、これは実行可能なソリューションではなくなりました。

理想的には、ブレークポイントが何になるかをコンテンツによって決定させる必要があります。最小の画面サイズに合わせて設計する利点により、まず、最も重要な情報が何か、そしてそれを最も明確かつ最もアクセスしやすい方法でユーザーに表示する方法を意識的に特定する必要があります。

通常の状況では、高さまたは幅のメディアクエリにどの CSS ユニットを選択しても大きな違いはありません。ただし、ユーザーがズームやフォント設定の変更によって閲覧環境を変更するタイミングを制御することはできません。そうなると、予期しない動作が発生し始めます。

コンテンツにブレークポイント値を決定させるとすると、ユーザーがブラウザの「フォントサイズ」設定を変更した場合、メディアクエリもそれに応じてその変更に適応する必要があります。ただし、ピクセルのような絶対単位を使用すると、メディアクエリはコンテンツに適合しなくなる可能性のある値に固定されたままになります。このとき、相対単位を使用する必要があります。

二重ブレークポイントの問題を回避する

これらのクエリの評価ロジックにより、min-width クエリと max-width クエリを使用すると問題が発生します。この時点で、比較演算子の使用を含めることができます。これは、ウィンドウの幅が宣言されたブレークポイントの値と一致すると条件が true になることを意味します。

35em をブレークポイントとして使用する最小幅クエリと最大幅クエリがあるとします。すべての主要なブラウザは異なるレンダリングエンジンを使用しているため、サイトは 35em では期待どおりに動作しない可能性があり、影響の重大度は各メディアクエリのスタイルの種類によって異なります。例を見てみましょう:

この例では、メイン要素のコンテンツが 1 行 2 列で表示される場合は背景が緑色になり、1 行 2 列で表示される場合は背景が赤色になることが予想されます。行と 1 列。幅 '35em' では、min-width' と 'max-width' が同時にアクティブになり、'min-width' クエリは flex-wrap を nowrap に設定し、'max-width' クエリは 'background-color' を ' に設定します。 red」では、「flex-basis」が「100%」に設定されているため、デモが「中断」されます。 (オンラインデモのアドレス: https://tympanus.net/codrops-playground/huijing/4jANYmn0/editor)

.flex-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

@media (min-width: 35em) {
  .flex-wrapper {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }  

  .main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 67%;
    flex: 1 1 67%;
    background-color: green;
  }
  .sidebar {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 33%;
    flex: 1 1 33%;
  }
}

@media (max-width: 35em) {
  .main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    background-color: red;
  }

  .sidebar {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }
}

ログイン後にコピー

CSSはメディアクエリに相対単位を使用します（例の紹介）