CSSメディアクエリ

前言:メディアの検索まで役に立ちましたが、少ししかできません.システム的に深く勉強したことがありません.最近、もう1冊の本を読んで、主に応答式のwebページを作る方法を話しています.だから、今日は簡単にまとめます.
一.メディア・クエリーとは、簡単なメディア・クエリー・コードを参照してください.

@media only screen and (max-width: 600px)
{
    .navside
    {
        display: none;
    }
}

上のコードの意味は、ページがスクリーンに表示されている場合(スクリーンを強調するのは、screen以外にも他のタイプがあるため)、ページの幅が600 px以下の場合、サイドバーを隠すことです.1.メディアタイプ上記コードのscreen.w 3 c規格では、all(すべての機器)、print(印刷装置)、speech(ページを読み取ることができるスクリーン読取装置、通常は障害者用)、screen(印刷装置およびスクリーン読取装置以外のすべての設定)、メディアタイプが指定されていない場合はデフォルトタイプall 2の4種類のメディアタイプが規定する.メディアフィーチャー式は、上記のコードのmax-widthです.規格で規定されている属性は、width、max-width(最大は超えない)、min-width(最小は超えない)、device-width(デバイス幅)、aspect-ratio(画面アスペクト比)、color(色)、resolution(画面解像度)などである.注:メディアクエリーは、スタイルシートだけでなく、などのスタイル外チェーンにも直接書くことができます.
二.メディアクエリの論理1.and(と)キーワード、次のコード:

@media (min-width:320px) and (orientation:landscape)
{
    .navside
    {
        display: none;
    }
}

上記のコードでは、画面幅が320 px以上、携帯電話が水平に配置する場合に実行する2つの条件を同時に満たす必要がある.(または)、(,)区切り記号を使用して表すか、コードは次のとおりです.

@media (min-width:320px) ,(orientation:landscape)
{
    .navside
    {
        display: none;
    }
}

条件のいずれかを満たす場合に実行する.not(非)、取反操作、コードは以下の通りです

@media not all and (min-width:320px)
{
    .navside
    {
        display: none;
    }
}
   ：not (all and (min-width:320px)),  (not all) and (min-width:320px)

@media not all and (min-width:320px),(color:red)
{
    .navside
    {
        display: none;
    }
}
   ：not (all and (min-width:320px)),(color:red)，  not ((all and (min-width:320px),(color:red))

三.メディアクエリのポリシー1.じゅんじょ

//  1
@media (min-width:320px)
{
    .navside
    {
        display: none;
    }
}
//  3
@media (min-width:800px)
{
    .navside
    {
        display: none;
    }
}
//  3
@media (min-width:1024px)
{
    .navside
    {
        display: none;
    }
}

上記のコードでは、後方からマッチングし、width=1000 pxに遭遇した場合、後方からポリシー2に遭遇した場合にマッチングを停止します.2.max-widthとmin-width、分岐文に類似

 //if (width <= 320px)
@media (max-width:320px)
{
    .navside
    {
        display: none;
    }
}
//if (width >= 320px && width <= 1024px)
@media (min-width:320px) and (max-width: 1024px)
{
    .navside
    {
        display: none;
    }
}
//if (width >= 1024px)
@media (min-width:1024px)
{
    .navside
    {
        display: none;
    }
}

以上の内容はメディアクエリーについてのまとめであり、その後は小さな例を添付し、今後の開発において、より熟練した運用をしていきたいと考えています.