媒体查询

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2. css2中media查询：

通过<link>标签的media属性为样式表指定设备类型：

比如：

（1）设备最大宽度是800px时，加载demo.css文件样式

<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">

(2)500px-800px之间的设备：

<link rel="stylesheet" media="screen and (max-width:800px) and (min-width:500px)" href="./demo.css">

(3)最小宽度500px时：

<link rel="stylesheet" media="screen and (min-width:500px)" href="./demo.css">

(4)在非打印设备下：

<link rel="stylesheet" media="not print and (max-width:800px)" href="./demo.css">

注意：not 逻辑操作符，必须用于开头，且会否定整个media声明。上述代码表示：not (print and max-width:800px) 

比如：不在（screen 且 最大宽度是800px）

<link rel="stylesheet" media="not screen and (max-width:800px)" href="./demo.css">

 上述代码在“screen且宽度大于800px”的情况下，会加载“demo.css”文件。

（5）orientation：portrait

指定输出设备中的页面可见区域高度大于或等于宽度（height >= width）

显示屏纵向放置

<link rel="stylesheet" media="screen and (orientation:portrait)" href="./demo.css">

（6）或逻辑操作符 ,

<link rel="stylesheet" media="screen and (orientation:portrait), print and (min-width:6in)" href="./demo.css">

表示：宽度小于等于高度的屏幕 或 最小宽度6英寸的打印设备 会加载demo.css样式

3. css3的media查询

特点：css样式中，不同情况下，标签的类选择器加载不同的样式

    <style>
        @media screen and (max-width:800px) and (min-width:500px){
            div{
                width: 100px;
                height: 100px;
                background-color: green;
            }
            span{
                color: red;
            }
        }
        @media screen and (max-width:500px){
            div{
                width: 200px;
                height: 200px;
                background: blue;
            }
            span{
                color: pink;
            }
        }
    </style>

当然，该css样式可以采用link标签将外部css文件引入的方式，可以将css样式写在一个css文件中引入，而不是在800px下，引入demo1.css文件，在600px下引入demo2.css文件。

4. 媒体类型：screen（电脑、手机、平板等屏幕），print（打印设备），all（所有设备）

5. 媒体特性：基本上只用到与width属性相关的属性，比如：max-width（最大宽度）、min-width（最小宽度）、width（渲染宽度）、device-width（设备宽度）

6. 通常情况下，px是相对单位，但是在该标签中，如下设置，px是绝对单位。即不同设备下，都是这么大。

实例：旋转木马的项目中，在浏览器中查看和在我自己手机上查看都是一样大。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7. 页面缩放的问题：

<meta name="viewport" content="width=device-width, initial-scale=1.0">中的initial-scale=1.0是缩放属性

（1）页面放大后，浏览器中的文档效果会变大，但是浏览器的宽高并没有变化，而文档中的标签元素会触发media中宽度变小的效果，好像是：浏览器宽高变小了，而触发了标签宽度小的时候的css样式。

（2）现在页面的设计不允许缩放，因为会重新布局页面：

<meta name="viewport" content="width=device-width, minimum-scale = 1.0, maximum-scale = 1.0, initial-scale = 1.0">

8. 媒体查询尺寸

所以设置的常有：

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

在设置时，需要注意先后顺序，不然后面的会覆盖前面的样式。