CSS3之媒体查询（响应式布局）

---

为啥有媒体查询：

1.移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。
2.Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）

---

@media 是什么

媒体查询由多媒体组成，可以包含一个或多个表达式，根据表达式条件判断是否成立，返回 true 或 false。
如果指定的多媒体类型匹配设备类型则返回查询结果为true，文档会在匹配的设备上显示指定样式效果。
可以简单理解为：告诉浏览器，当满足某条件时，调用某样式。当满足条件A时，调用A样式； 当满足条件B时，调用B样式。

@media 查询条件表达式｛ CSS样式 ｝

	@media only screen and (min-width:300px) and (max-width:900px){...}

关键字

and

not：该关键字是用来排除某种制定的媒体类型

only：用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

媒体类型

媒体功能

二、使用方法

css中引入

@media 查询条件表达式｛ CSS样式 ｝

	@media only screen and (min-width:300px) and (max-width:900px){...}

head标签中引入

<link media=“查询条件表达式” />
<link rel="stylesheet" href="./css1.css" media="only screen and (max-width:300px)">
<link rel="stylesheet" href="./css2.css" media="only screen and (min-width:301px) and (max-width:900px)">

常用总汇

常用媒体功能
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态（orientation:landscape 竖屏 orientation:portrait 横屏）。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

常用的尺寸
小于768的
768px
768和992之间的
992px
992和1200间的
1200px
大于1200

@media (max-width: 767px) { … col-xs-3… } { //<=767的设备 } 手机
@media (min-width: 768px) { … col-sm-3… } { //>=768的设备 } 平板
@media (min-width: 992px) { … col-md-3…} { //>=992的设备 } 电脑
@media (min-width: 1200px) { … col-lg-3…} { //>=1200的设备 } 大显示器