Media query


レスポンスWeb(Responsive Web Design)


これは、さまざまなデバイスの解像度に反応し、それぞれの最適な画面を表示するページです.
  • ex)モバイル画面とデスクトップ画面が異なる

    メディアクエリ


    CSS構文の1つ.インタラクティブWebの作成に使用します.
    特定の条件でCSSを起動するようにコマンドできます.

    1)機器の解像度に応じた応用点(ブレークポイント)


    解像度320~480 px->移動
    解像度768-1024 px->グラフィック入力ボード
    解像度1024 px~->デスクトップ
    (これは標準的な分岐機構で、各設備の分岐機構をチェックする必要があります)

    2)メディアクエリの適用方法

  • CSSテーブルで@mediaを使用
    指定した条件が満たされている場合は、{}のスタイルが適用されます.
    @meida
  • @media screen and (max-width: 1024px) {
    .lol{
    display:none;
     }
    }

  • 小さいデバイスからアプリケーションを開始するには、minを使用します.
    デバイスサイズから適用する場合はmaxに設定します.

  • linkも使えますが、CSSファイルが多すぎると、
    速度が遅くなるのでおすすめしません.