媒体查询@media锦囊

根据设备的宽度不同设置差异化样式

书写顺序 避免css的层叠性 遵循：

min-width(从小到大)

max-width(从大到小)

**

完整写法：

@media 关键字 媒体类型 and （媒体特性）{css代码}
注意媒体特性无论是max 还是min都是包含等于这个数值的

**关键字：
and 俩条件

          only  仅仅 写一个判断条件的时候
          not  非 判断不是...的时候**

**媒体类型：
screen：带屏幕的设备

             print:打印预览模式
             speech:屏幕阅读模式
             all  默认值 不区分类型 包含上面三种**

**媒体特性：
属性-- 视口的宽高：width heigth 值为数值

               属性-- 视口最大宽高 max-width  max-height 值为数值
               属性-- 视口最小宽高 min-width  min-height 值为数值
               属性-- 屏幕方向： orientation 值为(portrait竖屏) (landscape横屏)**

1.一般正常显示在浏览器写这个

@media screen and (min-width:600px){
  body {background-color:#f5f5f5;}
}
 //简写：
 @media (min-width:600px){
  body {background-color:#f5f5f5;}
}

//除了打印预览模式的时候显示最小宽度为600px
@media not print and (min-width:600px){
  body {background-color:#f5f5f5;}
}

2.多个条件显示多个媒体特性使用

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

  //简写 
  @media (min-width:375px) and (max-width: 600px) {
     body {
        background-color: red;
      }
    }

3.最小宽度

 @media screen and (min-width:768px) {
   body { 
         background-color: red;
        }
   }
   
  //简写：
  
   @media(min-width:768px) {
   body { 
         background-color: red;
        }
  }
   

4.最大宽度

 @media screen and (max-width:768px) {
   body { 
         background-color: red;
      }
   }
   简写
  @media(max-width:768px) {
   body { 
         background-color: red;
      }
   }

5.link方式

<link rel="stylesheet" href="./css/one.css" media="screen and (min-width:375px)">
<link rel="stylesheet" href="./css/two.css" media="screen and (min-width:995px)">
 简写：
<link rel="stylesheet" href="./css/one.css" media="(min-width:375px)">
<link rel="stylesheet" href="./css/two.css" media="(min-width:995px)">

one.css

body{
    background-color: pink;
}

two.css

body{
    background-color: black;
}

min-width(从小到大)的由来

(简写)因为screen就是显示浏览器带屏幕的设备没必要写

错误书写：

**我们的需求是最小值768px-992px显示red 992px-1200px显示black 1200px--屏幕的最大显示plum
但是下面的代码涉及到css层叠性 下面的把上面的覆盖 最终的效果是：
最小值768px--992px屏幕显示区域全是显示的red颜色 992px---屏幕最大显示black plum永远不会显示**

 @media(min-width:1200px) {
        body{ 
            background-color: plum;
        }
    }
  @media(min-width:768px) {
        body { 
            background-color: red;
        }
    }
    @media(min-width:992px) {
        body { 
            background-color: black;
        }
    }
   

正确书写
包含等于
768px--992px 显示red 992px-1200px显示black 1200px--最大屏幕显示plum

  @media(min-width:768px) {
        body { 
            background-color: red;
        }
    }
    @media(min-width:992px) {
        body { 
            background-color: black;
        }
    }
    @media(min-width:1200px) {
        body{ 
            background-color: plum;
        }
    }

max-width(从大到小)的由来

(简写)因为screen就是显示浏览器带屏幕的设备没必要写

错误写法

最终结果是小于等于1200px的屏幕大小都显示plum颜色 red和black永远不会显示

  @media(max-width:768px) {
        body { 
            background-color: red;
        }
    }
    @media(max-width:992px) {
        body { 
            background-color: black;
        }
    }
    @media(max-width:1200px) {
        body{ 
            background-color: plum;
        }
    }

正确写法

 //最大值是1200px  那么他的所有小于等于1200px都显示颜色plum
   @media(max-width:1200px) {
        body {
            background-color: plum;
        }
    }
    //最大值是992px  那么他的所有小于等于992px都显示颜色black
   @media(max-width:992px) {
        body {
            background-color: black;
        }
    }
    //最大值是768px  那么他的所有小于等于768px都显示颜色red
   @media(max-width:768px) {
        body {
            background-color: red;
        }
    }