媒体查询（Media Queries）

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

（注：当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link> 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。）

在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。

二.操作符

1.逻辑操作符

操作符 not，and 和 only 可以用来构建复杂的媒体查询。

and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。

not 操作符用来对一条媒体查询的结果进行取反。

only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

/*仅在可视区域宽度小于或等于700像素并在在横屏时有效*/
@media (min-width: 700px) and (orientation: landscape) { ... }

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

not

not 关键字应用于整个媒体查询，在媒体查询为假时返回真（在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。）

@media not all and (monochrome) { ... }
等价于
@media not (all and (monochrome)) { ... }
不等价于
@media (not all) and (monochrome) { ... }

only

only 关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

2.逗号分隔列表

可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符

/*在可视区域宽度有效，同样，在一个500像素宽的横屏手持设备一样返回真*/
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

三.媒体属性

大多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”

常用属性：

width:浏览器可视宽度。

值：<length>

媒体：visual, tactile

是否接受 min/max 前缀：是

@media screen and (max-width:640px){}
/*仅在可视区域高度大于或等于700像素时有效*/

height:浏览器可视高度。

值：<length>

媒体：visual, tactile

是否接受 min/max 前缀：是

device-width:设备屏幕的宽度。

值：<length>

媒体：visual, tactile

是否接受 min/max 前缀：是

device-height:设备屏幕的高度。

值：<length>

媒体：visual, tactile

是否接受 min/max 前缀：是

orientation:检测设备目前处于横向还是纵向状态。

值：landscape | portrait（横屏|竖屏）

媒体：visual

是否接受 min/max 前缀：否

@media all and (orientation: portrait) { ... }
/*仅在横屏时有效*/

其他属性：

aspect-ratio:检测浏览器可视宽度和高度的比例。

值：<ratio>

媒体： visual, tactile

是否接受 min/max 前缀：是

@media screen and (min-aspect-ratio: 1/1) { ... }
/*仅在宽高比1:1时有效*/

device-aspect-ratio:检测设备的宽度和高度的比例。

值：<ratio>

媒体：visual, tactile

是否接受 min/max 前缀：是

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

值： <color>

媒体： visual

是否接受 min/max 前缀：是

color-index:检查设备颜色索引表中的颜色，他的值不能是负数。

值：<integer>

媒体： visual

是否接受 min/max 前缀：是

monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，很少会用的到）

resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

grid：检测输出的设备是网格的还是位图设备。

值：<integer>

媒体：all

是否接受 min/max 前缀： 否

判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。

附录：

媒体介质类型：

all – 全部媒体类型

braille – 盲文触摸装置

embossed – 分页盲文打印机 

handheld – 小屏幕和流量有限的手持设备

print – 提供给打印机的样式，最常用的介质类型，打印页面时获得适合阅读的效果

projection – 投影，给投影机使用

screen – 彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用

speech – 语音朗诵，用于屏幕阅读软件

tty – 固定间距字符网格，例如功能机那样的

tv – 智能电视设备

设备断点：

参考国外的，仅供参考
/* 在纵向和横向所有的智能手机----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
...
}

/***** Android设备*****/

/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
...
}

/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in Landscape 685 X  380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}

/***** ALL GENERATION IPADS *****/

/* iPads in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */  
}

/* iPad in landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}

/* iPad in portrait----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}

/***** Retina IPAD 3 & 4*****/

/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/

/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in portrait ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}

/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}