媒体查询

媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式

1、媒体类型
    
2、媒体特性
    
3、逻辑运算符

媒体类型

all 所有设备

print 打印机设备

screen 彩色的电脑屏幕

speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

媒体特性

  一、width 宽度
  
  min-width 最小宽度，宽度只能比这个大
  max-width 最大的宽度，宽度只能比这个小
  
  二、height 高度

  min-height 最小高度，高度只能比这个大
  max-height 最大的高度，高度只能比这个小
  
  三、orientation 方向
  
  landscape 横屏 (宽度大于高度)
  portrait 坚屏 (高度大于宽度)
  aspect-ratio 宽度比
  -webkit-device-pixel-ratio 像素比 (webkit 内核的私有属性)

逻辑运算符：用来做条件判断

  and       合并多个媒体查询（并且的意思）
  ,         区配某个媒体查询（或者的意思）
  not       对媒体查询结果取反
  only      仅在媒体查询匹配成功后应用样式（防范老旧浏览器）

具体代码的实现如下：

 div {
        width: 100px;
        height: 100px;
        background: red;
    }
    /* 400-500之间是默认的 */
    div {
        width: 100px;
        height: 100px;
        background: red;
    }

    /* 屏幕尺寸大于500的时候满足 */
    @media (min-width: 500px) {
        div {
            background: green;
        }
    }

    /* 屏幕尺寸小于400的时候满足 */
    @media (max-width: 400px) {
        div {
            background: blue;
        }
    }

    /* 横屏的时候满足 */
    @media (orientation: landscape) {
        div {
            width: 400px;
            height: 100px;
        }
    }

    /* 竖屏的时候满足 */
    @media (orientation: portrait) {
        div {
            width: 100px;
            height: 400px;
        }
    }

    /* 宽高比为4：3的时候满足，800*600的时候是4：3 */
    @media (aspect-ratio: 4/3) {
        div {
            border: 10px solid #000;
        }
    }

    /* 当像素比为2的时候，满足 */
    @media (-webkit-device-pixel-ratio: 2) {
        div:after {
            content: "芸芸";
            font-size: 50px;
        }
    }

    /* 对媒体查询逻辑的应用 */
    div {
        width: 200px;
        height: 200px;
        background: red;
    }

    /* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
    @media all and (min-width: 700px) and (orientation: landscape) {
        div {
            background: green;
        }
    }

    /* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
    @media (max-width: 800px), (orientation: landscape) {
        div {
            background: pink;
        }
    }

    /* 屏幕的尺寸要大于800的时候，整个才满足 */
    @media not all and (max-width: 800px) {
        div {
            background: blue;
        }
    }

    @media only screen and (min-width: 1000px) {
        div {
            background: grey;
        }
    }

    /* media 媒体查询从移动端到 PC 端的适配 */
    /* 小于768 ipad*/
    @media screen and (max-width: 768px) {
        html {
            font-size: 18px;
        }
    }
    /*小于 480px  手机*/
    @media screen and (max-width: 480px) {
        html {
            font-size: 16px;
        }
    }

    /*768-1023*/
    @media screen and (min-width: 769px) and (max-width: 1023px) {
        html {
            font-size: 20px;
        }
    }
    /*1024-1279*/
    @media screen and (min-width: 1024px) and (max-width: 1279px) {
        html {
            font-size: 24px;
        }
    }
    /*1280-1440*/
    @media screen and (min-width: 1280px) and (max-width: 1439px) {
        html {
            font-size: 26px;
        }
    }

    /*>=1440的设备屏幕*/
    @media screen and (min-width: 1440px) {
        html {
            font-size: 28px;
        }
    }
    /*>=1920的设备屏幕*/
    @media screen and (min-width: 1920px) {
        html {
            font-size: 34px;
        }
    }

    /* PC端 */
    /* >=1920px */
    @media (min-width: 1921px) {
        html {
            font-size: 30px;
        }
    }

    @media (max-width: 1920px) {
        html {
            font-size: 26px;
        }
    }

    @media (max-width: 1600px) {
        html {
            font-size: 24px;
        }
    }

    @media (max-width: 1440px) {
        html {
            font-size: 22px;
        }
    }

    @media (max-width: 1280px) {
        html {
            font-size: 20px;
        }
    }

    @media (max-width: 1024px) {
        html {
            font-size: 18px;
        }
    }

    /* 移动端 */
    @media (max-width: 999px) {
        html {
            font-size: 20px;
        }
    }
    @media (max-width: 759px) {
        html {
            font-size: 20px;
        }
    }
    @media (max-width: 376px) {
        html {
            font-size: 20px;
        }
    }

    @media screen and (min-width: 1441px) {
    }

    @media screen and (min-width: 1510px) {
    }

    @media screen and (min-width: 1600px) {
    }

    @media screen and (min-width: 1680px) {
    }

    @media screen and (min-width: 1920px) {
    }

    @media screen and (max-width: 1280px) {
    }

    /* 手机端 */
    @media screen and (max-width: 900px) {
    }

    @media screen and (max-width: 320px) {
    }