本文已参与「新人创作礼」活动，一起开启掘金创作之路。
媒体查询
概念
媒体查询就是针对不同的终端 (PC端、iPad端和移动端)，在使相同的 HTML结构的前提下，利用 CSS 的媒体查询来为不同的终端调用不同的CSS样式，从而在不同的终端中，都能呈现出不同的UI界面效果。
并且在使用媒体查询时，可以针对不同的媒体类型定义不同的样式。
综上：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是在需要设计响应式页面时，@media 是非常有用的。
当每次调整浏览器大小的过程中，页面也会根据浏览器的宽高来重新渲染页面。
在 IE8及以下都不兼容
语法：
@media not|only mediatype and (mediafeature1 and|or|not mediafeature2) {
CSS-Code;
}
not/only/and：逻辑运算符 (括号外面的)mediatype：媒体类型mediafeature：媒体功能
逻辑运算符：
not：否定，在@media后，不满足则返回true，否则返回false。only：仅仅，在@media后。and：连接多个媒体查询规则组合成 单条媒体查询，在mediatype后。or：或者。,：将多个媒体查询合并为一个规则。
/* 小于宽高为 600px 时 隐藏div */
@media screen and ((max-width: 600px), (max-height:300px)){
div{display: none;}
}
@media screen and (max-width: 600px) and (max-height:300px){
div{display: none;}
}
@media screen and (max-width: 600px) or (max-height:300px){
div{display: none;}
}
/* 下于宽为 600px 时 隐藏div，不关高的事 */
@media screen and (max-width: 600px) not (max-height:300px){
div{display: none;}
}
媒体类型 (mediaType)：
-
all：匹配所有设备 -
print：用于打印机 -
screen：用于屏幕 -
speech：用于语音合成器 (比如屏幕阅读器)以下的媒体类型都已经被废弃了，但浏览器还是能够识别：
-
aural：用于语音和音频合成器，被speech替代 -
braille：用于盲人用点字法触觉回馈设备 -
embossed：用于分页的盲人用点字法打印机 -
handheld：用于小的手持的设备 -
projection：用于方案展示，比如幻灯片 -
tty：用于使用固定密度字母栅格的媒体，比如电传打字机和终端 -
tv：用于电视机类型的设备
媒体功能 (mediafeature)：
-
width：定义输出设备中的页面可见区域宽度。 -
height：定义输出设备中的页面可见区域高度。 -
max-width：最大可见区域宽度。 -
min-width：最小可见区域宽度。 -
min-height：最小可见区域高度。 -
max-height：最大可见区域高度。 -
color：定义输出设备每一组彩色原件的个数，若不是彩色设备，值为0。 -
min-color：定义输出设备每一组彩色原件的最小个数。 -
max-color：定义输出设备每一组彩色原件的最大个数。 -
color-index：定义输出设备中彩色查询表中的条目数，未使用彩色查询表，值为0。 -
min-color-index：定义输出设备中彩色查询表中的最小条目数。 -
max-color-index：定义输出设备中彩色查询表中的最大条目数。 -
aspect-ratio：定义输出设备中的页面可见区域宽度与高度的比率。 -
min-aspect-ratio：定义输出设备中的页面可见区域宽度与高度的最小比率。 -
max-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比率。 -
device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的比率。 -
min-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最小比率。 -
max-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比率。 -
device-width：定义输出设备的屏幕可见宽度。 -
device-height：定义输出设备的屏幕可见高度。 -
min-device-width：定义输出设备的屏幕最小可见宽度。 -
min-device-height：定义输出设备的屏幕的最小可见高度。 -
max-device-width：定义输出设备的屏幕最大可见宽度。 -
max-device-height：定义输出设备的屏幕可见的最大高度。 -
resolution：定义设备的分辨率。如：96dpi, 300dpi, 118dpcm。 -
min-resolution：定义设备的最小分辨率。 -
max-resolution：定义设备的最大分辨率。 -
monochrome：定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0。 -
min-monochrome：定义在一个单色框架缓冲区中每像素包含的最小单色原件个数。 -
max-monochrome：定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 -
orientation：定义输出设备中的页面可见区域高度是否大于或等于宽度。portrait：竖屏，屏幕视窗高度大于宽度。landscape：横屏，屏幕视窗宽度大于高度。
-
scan：定义电视类设备的扫描工序。 -
grid：查询输出设备是否使用栅格或点阵。
举例
<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
单个使用
/* 在屏幕可视窗口尺寸 小于480 像素的设备上修改背景颜色 */
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
/* 屏幕可视窗口尺寸 小于600 像素时将 div 元素隐藏 */
@media screen and (max-width: 600px) {
div {
display: none;
}
}
用min-width时，小的在上面，大的在下面
/* 小设备 (平板电脑和大型手机) */
@media only screen and (min-width: 600px) {
body {background: green;}
}
/* 中型设备（平板电脑） */
@media only screen and (min-width: 768px) {
body {background: blue;}
}
/* 大型设备（笔记本电脑/台式机） */
@media only screen and (min-width: 992px) {
body {background: orange;}
}
/* 超大型设备（大型笔记本电脑和台式机） */
@media only screen and (min-width: 1200px) {
body {background: pink;}
}
用max-width时，大的在上面，小的在下面
/* 992px-1200px */
@media (max-width: 1200px) {
body {background-color: pink;}
}
/* 768px-992px */
@media (max-width: 992px) {
body {background-color: orange;}
}
/* 600px-768px */
@media (max-width: 768px) {
body {background-color: blue;}
}
/* <=600px */
@media (max-width: 600px) {
body {background-color: green;}
}
同时使用 min-width 和 max-width
/* <=600px */
@media (max-width: 600px) {
body {background: green;}
}
/* 601px-992px */
@media (min-width: 601px) and (max-width: 992px) {
body {background: blue;}
}
/* 993px-1200px */
@media (min-width: 993px) and (max-width: 1200px) {
body {background: orange;}
}
/* >=1201px */
@media (min-width: 1201px) {
body {background: pink;}
}
