メディアクエリ

8618 ワード
codenewbie todayilearned css beginners テキストリンク
ハローフェロー👋
だから我々は我々のアプリのスタイルを終えているとしましょう.
しかし、ページビューの特定のサイズでは、我々のアプリに別のスタイルを適用します.
これは、メディアのクエリが再生に来る時間です.

メディア質問
メディア質問は、反応目的のために使われます.
これは、さまざまなスタイルを適用するいくつかの特定の種類と条件をターゲットにします.

構文と説明
構文:
@media () {...}
このようにします.
@media media-type and (media-conditions) {...}

メディアタイプ
メディアのさまざまな種類のメディアクエリをターゲットにします.

スクリーン
これは、携帯電話、タブレット、またはデスクトップなどの画面ベースのデバイスを対象とします.
@media screen (...) {...}

プリント
印刷目的の文書を対象とする.
このタイプでは、ユーザーがルールを設定した形式でページを印刷できます.
 @media print {...}

スピーチ
これは、画面リーダーなどのコンテンツを読みやすくするデバイスを対象とします.
@media speech {...}

すべて
上記のすべてのメディアタイプを対象とします.
⭐ これは一般的に使われるものです.
@media all and (...) {...}
私たちがどんなタイプも割り当てないとき、デフォルトで、それはすべてに分類されます.
@media (...) {...}

メディアコンディション
メディアクエリをターゲットにする特定の条件.

幅
@media (min-width: ...) {...}
or
@media (max-width: ...) {...}
or
@media (min-width: ...) and (max-width: ...) {...}

  • 幅
    指定された値のサイズから特定のスタイルを適用し、より大きい.
    私たちが最初にモバイルを行っているとき、私たちは、最初に最小の幅から始めて、より多くの規則を加えます.

  • 最大幅
    指定された値まで特定のスタイルを適用すること.
    我々はデスクトップの最初の我々のアプリを設計していると私たちの方法を作業し、我々はより良いの最大幅を開始します.
    📝 min-widthとmax-widthの適用:
    @media (min-width: 400px) and (max-width: 800px) {
 .container {
    display: flex;
 }
}
    📖 400 pxの幅から800 pxまでの間、クラスコンテナを持つ要素にdisplay: flexを適用します.

    • 方位
    @media (orientation: portrait) {...}
    or
    @media (orientation: landscape) {...}

  • 肖像
    ページビューがワイドより高い場合の方向

  • 景観
    ページビューが背より広いときのオリエンテーション

    • 追加重要な注意

  • 両方のメディアの種類と条件を適用するオプションです.
    両方を適用する必要はありませんが、少なくとも1つを適用しなければなりません.
    • メディア・タイプとメディアタイプを結合する
  • は、我々がandを使わなければなりません.
    • @media screen and (min-width: 640px) and (max-width: 1000px) {...}

  • 順序は重要です.
    基本的なCSS規則に固執して、何が次の勝利になるか.
    それで、我々はそれを越えるために初期のスタイルの後、メディア質問を適用する必要があります.
    これを行う良い方法は、すべての初期スタイルコードの最後に、メディアクエリを下に置くことです.
  • 我々はメディアクエリブロックスコープ内で修正したい要素を述べる必要がある.
    •   body {
     margin: 0;
     padding: 0;
  }

  h1 {
     color: green;
  }

  .container {
     margin: 0 auto;
  }

  .bigger-paragraph {
    font-size: 2rem;
  }

  @media (min-width: 500px) and (orientation: landscape) {
    h1 {
       color: blue;
    }

    .bigger-paragraph {
      font-size: 4rem;
    }
  }
    私は、遊ぶために下にcodepenを提供します.

    結論
  • 我々は、応答目的のためにメディア質問を使用します.
  • メディアクエリのターゲット

  • メディアタイプ
  • スクリーン
  • 印刷
  • のスピーチ
  • ALL (デフォルト)⭐

  • メディアコンディション

  • 幅
  • min幅
  • マックス幅

  • 方位
  • の肖像
  • の景色
    • [Android 6.0][MTK 6737]MTKコンパイル環境構築
    MAC-MySQL文字セットをUTF-8に変更