css3 media媒体查询

css3 media媒体查询

@media媒体查询 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media媒体查询是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

一、语法

@media mediatype and|not|only (media feature) {...}{
    CSS-Code;
}

		

二、mediatype媒体类型

三、关键字 not 、only

1、only：用来指定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

2、not：not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）

3、and：连接词

四、media feature设备特性值

五、css3 media媒体查询实例

1、当页面小于960px的时候执行它下面的CSS

@media screen and (max-width: 960px){...}{
    body{
        background: #000;
    }
}

		

2、等于960px尺寸的时候执行它下面的CSS

@media screen and (max-device-width:960px){...}{
    body{
        background:red;
    }
}

		

3、大于960px尺寸的时候执行它下面的CSS

@media screen and (min-width:960px){...}{
    body{
        background:orange;
    }
}

		

4、当页面宽度大于960px小于1200px的时候执行下面的CSS

@media screen and (min-width:960px) and (max-width:1200px){...}{
    body{
        background:yellow;
    }
}