# 11-媒体查询
# 媒体查询的作用
@media (media-feature-name: value) { /* 符合条件时应用的样式 */}
1
上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别应用不同的样式甚至替换整个样式表。
如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。
注意：浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。
为此，条件式媒体查询样式经常要覆盖其他样式，比如隐藏之前的可见元素，把区块移动位置，调整字号等。
# 媒体查询中最常用的媒体特性 media feature
| 特性名 | 值 | 应用场景 |
|---|---|---|
| width min-width max-width | 显示区域的宽度（对打印机而言是打印表面） | 改变布局以适应非常窄（如手机）或非常宽的显示器。 |
| height min-height max-height | 显示区域的高度 | 改变布局以适应非常长或非常短的显示器 |
| device-width min-device-width max-device-width | 当前计算机或设备屏幕的宽度 （或打印输出时纸面的宽度） | 根据不同设备（如手机）调整布局 |
| device-height min-device-height max-device-height | 屏幕或纸面的高度 | 根据不同设备（如手机）调整布局 |
| orientation | landscape（横向）或portrait（纵向） | 根据设备的朝向调整布局 |
| device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio | 显示区域的宽高比（1/1是正方形） | 根据窗口形状调整样式（问题可能比较复杂） |
| color min-color max-color | 屏幕颜色的位深 （1位表示黑白，目前主流显示器都是24位） | 检查是否支持彩色输出（比如是不是黑白打印）， 或者支持的颜色数量 |
虽然有这么多媒体特性，但目前最流行最常用的是如下几个：
- max-device-width：用于创建手机版网站
- max-width：用于针对窗口宽度设定不同的样式
- orientation：用于根据平板电脑或iPad的横向或者竖向来改变布局
# 媒体查询的高级条件
# 使用 and 关键字拼接媒体查询块
/** 正常样式 **/
@media (min-width: 600px) and (max-width: 700px) {
/** 窗口宽度在600-700像素的样式 **/
}
@media (min-width: 500px) and (max-width: 599.99px) {
/** 窗口宽度在500-600像素的样式 **/
}
@media (max-width: 499.99px) {
/** 窗口宽度小于500像素的样式 **/
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 替换整个样式表
如果样式修改的地方很多，那么创建一个新样式表会更便于管理。创建样式表后，可以使用媒体查询创建一个样式表链接。
1）当页面宽度小于568像素时，会应用新样式并与原来已存在的样式叠加。
<head>
<link rel="stylesheet" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>
1
2
3
4
2
3
4
（2）下面样例让几个样式完全独立，不叠加
<head>
<link rel="stylesheet" media="(min-width: 568.01px)" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>
1
2
3
4
2
3
4
但像旧版的IE不理解媒体查询就会忽略这两个样式表，所以我们需要使用条件注释引入标准样式表：
<head>
<link rel="stylesheet" media="(min-width: 568.01px)" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="hangge.css">
<![endif]-->
</head>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 常用 media
参考 css-tricks (opens new window)
/* 横屏 */
@media screen and (orientation:landscape){
}
/* 竖屏 */
@media screen and (orientation:portrait){
}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){
}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){
}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){
}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){
}
/* 设备像素比为2 */
/* 常用于1px边框，还应规定 3dppx 的情况 */
/* resolution 分辨率 dpr === dppx */
@media (min-resolution: 2dppx) {
}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38