[TOC]
# 响应式 Web 设计 - 媒体查询
## 媒体查询
**CSS3 @media 查询**
如果文档宽度小于 300 像素则修改背景演示(background-color):
~~~
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
~~~
### 定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
### 浏览器支持
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
### CSS 语法
~~~
@media mediatype and|not|only (media feature) {
/* CSS-Code;*/
}
~~~
你也可以针对不同的媒体使用不同 stylesheets :
~~~
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
~~~
### 媒体类型（mediatype）
| 值 | 描述 |
| --- | --- |
| all | 用于所有设备 |
| print | 用于打印机和打印预览 |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
被废弃的类型：
| 值 | 描述 |
| --- | --- |
|aural |已废弃。用于语音和声音合成器|
|braille |已废弃。 应用于盲文触摸式反馈设备|
|embossed |已废弃。 用于打印的盲人印刷设备|
|handheld |已废弃。 用于掌上设备或更小的装置，如PDA和小型电话|
|projection |已废弃。 用于投影设备|
|tty |已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备|
|tv |已废弃。 用于电视和网络电视|
### 媒体功能（media feature）
| 值 | 描述 |
| --- | --- |
|aspect-ratio| 定义输出设备中的页面可见区域宽度与高度的比率|
|color| 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0|
|color-index| 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0|
|device-aspect-ratio| 定义输出设备的屏幕可见宽度与高度的比率。|
|device-height| 定义输出设备的屏幕可见高度。|
|device-width |定义输出设备的屏幕可见宽度。|
|grid |用来查询输出设备是否使用栅格或点阵。|
|height |定义输出设备中的页面可见区域高度。|
|max-aspect-ratio| 定义输出设备的屏幕可见宽度与高度的最大比率。|
|max-color |定义输出设备每一组彩色原件的最大个数。|
|max-color-index| 定义在输出设备的彩色查询表中的最大条目数。|
|max-device-aspect-ratio| 定义输出设备的屏幕可见宽度与高度的最大比率。|
|max-device-height| 定义输出设备的屏幕可见的最大高度。|
|max-device-width| 定义输出设备的屏幕最大可见宽度。|
|max-height| 定义输出设备中的页面最大可见区域高度。|
|max-monochrome |定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。|
|max-resolution| 定义设备的最大分辨率。|
|max-width| 定义输出设备中的页面最大可见区域宽度。|
|min-aspect-ratio| 定义输出设备中的页面可见区域宽度与高度的最小比率。|
|min-color |定义输出设备每一组彩色原件的最小个数。|
|min-color-index |定义在输出设备的彩色查询表中的最小条目数。|
|min-device-aspect-ratio| 定义输出设备的屏幕可见宽度与高度的最小比率。|
|min-device-width| 定义输出设备的屏幕最小可见宽度。|
|min-device-height |定义输出设备的屏幕的最小可见高度。|
|min-height| 定义输出设备中的页面最小可见区域高度。|
|min-monochrome |定义在一个单色框架缓冲区中每像素包含的最小单色原件个数|
|min-resolution |定义设备的最小分辨率。|
|min-width |定义输出设备中的页面最小可见区域宽度。|
|monochrome| 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0|
|orientation| 定义输出设备中的页面可见区域高度是否大于或等于宽度。|
|resolution| 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm|
|scan| 定义电视类设备的扫描工序。|
|width| 定义输出设备中的页面可见区域宽度。|
## 应用
之前写的网页它是响应式的，但在小屏幕上并不能友好的展示。
媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。
**桌面设备**
**手机设备**
使用媒体查询在 768px 添加断点：
当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:
~~~
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
~~~
### 为移动端优先设计
移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。
这就意味着我们必须对 CSS 做一些改变。
我们在屏幕小于 768px 进行样式修改，同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例：
~~~
/* 为移动端设计: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
~~~
你也可以使用添加其他的断点：
在屏幕为 600px 时添加媒体查询，并设置新的样式（屏幕大于600px但小于768px）：
~~~
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
~~~
> 注意两组类样式是相同的，但名称不同 (col- 和 col-m-):
以上代码看起来很多余，但是他可以根据屏幕大小自动设置不同的样式，所以还是非常必要的。
~~~
<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
~~~
> 针对桌面设备:
第一和第三部分跨越 3 列。中间部分跨域 6 列。
针对平板设备:
第一跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列：
### 方向：横屏/竖屏
结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。
**语法：**
~~~
orientation：portrait | landscape
~~~
+ portrait：指定输出设备中的页面可见区域高度大于或等于宽度
+ landscape： 除portrait值情况外，都是landscape
~~~
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
~~~
> 如果是横屏背景将是浅蓝色：
