媒体查询(media)-screen

1.什么是媒体查询？

        以我个人的理解来说，媒体查询就是监听实时监听页面的宽度，当达到媒体查询设置的条件时，用设置在媒体查询中的css样式代替该元素之前设置的样式(当然，如果该元素之前没有设置css样式的画，是添加上新样式)；

        因为通过使用的媒体类型都是screen媒体类型；所以下面的这个问题就是探讨一下媒体查询的本质；

        那么就有一个疑问啦？css中的媒体查询与js中的window,onresize有什么区别吗?

        以本人理解，没有区别；只不过在js中设置window,onresize事件，然后通过if判断window.innerWidth是值然后在if的块级作用域中写css样式自然没有直接在css中写来的方便；

  再换句话说：媒体查询是不是就可以理解为在css中设置了window,onresize事件和if判断；

2.媒体查询的具体使用方法

@media  媒体类型  and  (媒体查询的特性/条件){        }                媒体查询的基本格式

screen：

@media   screen  and  (max-width:800px){                }                当页面小于800px时候，使用该媒体查询中的样式；

 @media   screen  and  (min-width:1200px){                }                 当页大于面于1200px时候，使用该媒体查询中的样式；

简化后：

@media  (max-width:800px){                }                当页面宽度与小于800px时候，使用该媒体查询中的样式； 

 @media  (min-width:1200px){                }              当页面宽大于1200px时候，使用该媒体查询中的样式；

也可以使用引用外部的css文件也使用媒体查询：

<link rel="stylesheet" media="screen and (min-width:600px)" href="./demo.css">        当页面宽大于600px时候，使用demo.css的样式；

<link rel="stylesheet" media="screen and (max-width:600px)" href="./demo.css">        当页面宽小于600px时候，使用demo.css的样式；

3.媒体查询的demo

当页面宽度小于700，div的颜色是red；大于700小于1200，div的颜色是aqua(其实本质还是当页面宽度与大于1200，这个样式被覆盖了)；当页面宽度大于700，div的颜色是red；

div{
    width:500px;
    height:500px;
    background-color: red;
}
@media (min-width:700px){
    div{
         background-color: aqua;
        }
@media (min-width:1200px){
      div{
          background-color: yellowgreen;
         }
}

注意html是从上往下读取css样式的,所以呈现的样式就是：

当页面宽度小于700，div的颜色是red；大于700，div的颜色是aqua；

div{
    width:500px;
    height:500px;
    background-color: red;
}
// 该条件一直不会执行 因为当满足大于1200宽度时候必定满足下面的条件；
@media (min-width:1200px){
      div{
          background-color: yellowgreen;
      }
}
// 当页面宽度大于1200之后，该设置的条件将覆盖上面的样式；
@media (min-width:700px){
    div{
         background-color: aqua;
        }
}