CSS3 @media 查询

@media可以针对不同屏幕尺寸设置不同的样式

使用范围：响应式页面

1、语法：

• 在style标签内使用

//文档宽度小于1366px时修改背景色
@media screen and (max-width: 1366px) {
    body {
        background-color:lightblue;
    }
}

//文档宽度介于1367px与1440px之间时修改背景色
@media screen and (min-width: 1367px) and (max-width: 1440px) {
    body {
        background-color:lightgreen;
    }
}

//文档宽度介于1441px与1600px之间时修改背景色
@media screen and (min-width: 1441px) and (max-width: 1600px) {
	body {
        background-color:lightred;
    }
}

//文档宽度大于1600px时修改背景色
@media screen and (min-width: 1601px) {
  .media-wrap {
    background-color: #fff;
  }
}

• 在html头部使用

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

2、解释：

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

媒体类型：（mediatype）

screen: 用于电脑屏幕，平板电脑，智能手机等。

print : 用于打印机和打印预览

媒体功能：（media feature）

media	功能
max-width	定义输出设备中的页面最大可见区域宽度。
min-width	定义输出设备中的页面最小可见区域宽度。
min-device-width	定义输出设备的屏幕最小可见宽度。
max-device-width	定义输出设备的屏幕最大可见宽度。