本文共 2451 字，大约阅读时间需要 8 分钟。

CSS3 @media 

定义和使用

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

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

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

CSS 语法

你也可以针对不同的媒体使用不同 stylesheets :

媒体类型（Media Type）

媒体功能（Media Feature）

实例1

如果文档宽度小于 300 像素则修改背景演示(background-color):

重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。

实例2

CSS代码

body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/@media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/@media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/@media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/@media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/

HTML代码

效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：
/*宽度500px-800px之间+高度100px-400px之间 蓝色*/
/*宽度小于500px时 绿色*/
/*宽度大于800px时 红色*/
/*高度小于100px时 黄色*/
/*高度大于400px时 粉色*/

转自菜鸟教程，