媒体查询是响应式设计的核心。
css语法：
以@media开头来表示这是一条媒体查询语句。
@media mediatype and|not|only (media feature) {
CSS-Code;
}
或针对不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
详解：
mediatype媒体类型：
1.all:用于所有设备
2.print：用于打印机和打印预览
3.screen：用于电脑屏幕，平板电脑，智能手机等
4.speech：应用于屏幕阅读器等发声设备
其余已废弃
连接符
1.and 把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
2.or 或，（逗号） 如果任何一个媒体查询返回真，样式就是有效的。
3.not 应用于整个媒体查询，在媒体查询为假时返回真,在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。
4.only
操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用,其实无论是否使用only操作符都对结果无影响
实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用
media feature 媒体属性
媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符
媒体属性必须用括号()包起来，否则无效
1.width | min-width | max-width//定义输出设备中的页面可见区域宽度。
2.height | min-height | max-height//定义输出设备中的页面可见区域高度。
3.device-width | min-device-width | max-device-width//定义输出设备的屏幕可见宽度。
4.device-height | min-device-height | max-device-height//定义输出设备的屏幕可见高度。
注：设备宽度(device-width)指的是显示该页面的屏幕宽度，这里指的是屏幕宽度，通常可以使用于移动设备的，因为这样的设备具有更小的显示区域。宽度(width)指的是浏览器窗口的宽度，特定媒体类型的渲染视区，对于桌面的操作系统来说，其实就是当前浏览器的宽度（并且是包括滚动条的）。且宽度默认等于屏幕宽度（width=device-width）
5.aspect-ratio | min-aspect-ratio | max-aspect-ratio//定义输出设备中的页面可见区域宽度与高度的比率
6.device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio//定义输出设备的屏幕可见宽度与高度的比率。
7.color | min-color | max-color//定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
8.color-index | min-color-index | max-color-index//定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
9.monochrome | min-monochrome | max-monochrome //定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
10.resolution | min-resolution | max-resolution //定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
11。scan | grid //定义电视类设备的扫描工序|用来查询输出设备是否使用栅格或点阵。
例：
@media only screen and (max- 500px) {
.gridmenu {
100%;
}
.gridmain {
100%;
}
.gridright {
100%;
}
}