CSS @media 查询

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

@media 的css3版本的浏览器支持：

css语法：
@media 媒体类型 and|not|only (媒体功能) { css样式代码 }

html中针对不同的媒体使用不同样式：
<link rel="stylesheet" media="媒体类型 and|not|only (媒体功能)" href="test.css">

• not 用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
• only 用来定某种特别的媒体类型。在支持媒体查询的设备中没有实际作用。

媒体类型：

值	描述
all	用于所有设备。
print	用于打印机和打印预览。
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备。

CSS3中废弃的类型：aural，braille，embossed，handheld，projection，tty，tv

/*在屏幕中显示时字体*/
@media screen{
  p{font-family:verdana,sans-serif;font-size:14px;}
}
/*打印时显示时字体*/
@media print{
  p{font-family:times,serif;font-size:10px;}
}
/*在屏幕中和打印时都为粗体*/
@media screen,print{
  p{font-weight:bold;}
}
/*非打印时*/
@media not print{
  p{font-weight:400;}
}

媒体功能：

值	描述
height	页面可见区域高度。
width	页面可见区域宽度。
min-height	页面最小可见区域高度。
min-width	页面最小可见区域宽度。
max-height	页面最大可见区域高度。
max-width	页面最大可见区域宽度。
device-width	屏幕可见宽度。
device-height	屏幕可见高度。
min-device-width	屏幕最小可见宽度。
min-device-height	屏幕的最小可见高度。
max-device-height	屏幕可见的最大高度。
max-device-width	屏幕最大可见宽度。
orientation	页面可见区域高度是否大于或等于宽度。值:portrait|landscape
resolution	设备的分辨率。如：96dpi, 300dpi, 118dpcm。
min-resolution	设备的最小分辨率。
max-resolution	设备的最大分辨率。
aspect-ratio	页面可见区域宽度与高度的比率
min-aspect-ratio	页面可见区域宽度与高度的最小比率。
max-aspect-ratio	页面可见区域宽度与高度的最大比率。
device-aspect-ratio	屏幕可见宽度与高度的比率。
min-device-aspect-ratio	屏幕可见宽度与高度的最小比率。
max-device-aspect-ratio	屏幕可见宽度与高度的最大比率。
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0。
min-color	定义输出设备每一组彩色原件的最小个数。
max-color	定义输出设备每一组彩色原件的最大个数。
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
scan	定义电视类设备的扫描工序。progressive连续扫描，interlace交织扫描。
grid	用来查询输出设备是否使用栅格或点阵。1代表是，0代表否。

例：在不同屏幕宽度时显示不同样式

/*当屏幕宽在 screen <= 200px 时，box的背景色是绿色, 其中 only 可以省略*/
@media only screen and (max-width: 200px) {
  .box{ background:green;}
}
/*当屏幕宽等于 400px 时，box的边框颜色是蓝色 */
@media screen and (width: 400px) {
  .box{ border-color:blue; }
}
/*当屏幕宽等于 400px 或 450px 时，box的边框颜色是蓝色 */
@media screen and (width: 400px),(width: 450px) {
  .box{ border-color:blue; }
}

/*当屏幕宽在 300px<= screen <=400px 之间时，box的背景色是红色 */
@media screen and (min-width: 300px) and (max-width: 400px) {    
  .box{ background:red; }
}
/*当屏幕宽 sreen >= 500px 时，box的背景色是粉色 */
@media screen and (min-width: 500px) {
  .box{ background:pink; }
}
/*在桌面电脑屏幕中 box 宽度25%*/
@media only screen and (max-width: 1200px) {
  .box{ width: 25%;}
}
/*在平板电脑屏幕中 box 宽度50%*/
@media only screen and (max-width: 992px) {
  .box{ width: 50%;}
}
/*在手机屏幕中 box 宽度100%*/
@media only screen and (max-width: 768px) {
  .box{ width: 100%;}
}

@media screen and (orientation:portrait) {
  /*若是手机，则手机横向时*/
}
@media screen and (min-resolution:300dpi) {
  /*设备分辨率大于等于 300dpi 时*/
}
@media screen and (aspect-ratio:16/9) {
  /*页面可见区域宽度与高度比为 16/9 时*/
}
@media screen and (min-color: 32) {
  /*检测设备拥有32位颜色时*/
}
@media tv and (scan:progressive){
  body{color:#f00;}
}

例：打印时隐藏不需要打印的内容，并设置打印内容样式

@media print{
  .box{ display:none; }
  .printBox{
     padding:20px;
     font-weight:bold;
     color:red;
  }
}