# 媒体查询两种方法:

# css 方式

	@media screen and (max-width: 600px) {
	/* 当屏幕尺寸小于 600px 时，应用下面的 CSS 样式 */
	.class {
	background: #ccc;
	}
	}
	/* 当屏幕尺寸大于 900px 时，应用下面的 CSS 样式 */
	@media screen and (min-width: 900px) {
	.class {
	background: #fff;
	}
	}

注意下顺序，如果你把 @media (min-width: 768px) 写在了下面那么很悲剧，

@media (min-width: 1200)
@media (min-width: 992px)
@media (min-width: 768px)

因为如果是 1440, 由于 1440>768 那么你的 1200 就会失效。

所以我们用 min-width 时，小的放上面大的在下面，同理如果是用 max-width 那么就是大的在上面，小的在下面

@media (max-width: 1199)
@media (max-width: 991px)
@media (max-width: 767px)

# link 方式

link 方式是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件：

<link href="styleA.css" media="screen and (min-width: 400px)" rel="stylesheet" type="text/css">

意思是当屏幕的宽度大于等于 400px 的时候，应用 styleA.css

# 使用方法: @media 多媒体类型 and (条件) and (条件)...

# 多媒体类型

all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等
speech 用于屏幕阅读器

# 条件

max-width：输出设备中页面最大可视区域宽度，小于这个 width 时，其中的 css 生效
min-width：输出设备中页面最小可视区域宽度，大于这个 width 时，其中的 css 生效
max-height：输出设备中页面最大可视区域高度
min-height：输出设备中页面最小可视区域高度

# 属性

在 media 属性里：
screen 是媒体类型里的一种，CSS2.1 定义了 10 种媒体类型
and 被称为关键字，其他关键字还包括 not (排除某种设备)，only (限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

常用的：

小于 768 的
768px
768 和 992 之间的
992px
992 和 1200 间的
1200px
大于 1200

bootstrap 的断点值：Bootstrap 是移动设备优先的

	/* 小屏幕（平板，大于等于 768px） */
	@media (min-width: 768px) { ... col-sm-3... }

	/* 中等屏幕（桌面显示器，大于等于 992px） */
	@media (min-width: 992px) { ... col-md-3...}

	/* 大屏幕（大桌面显示器，大于等于 1200px） */
	@media (min-width: 1200px) { ... col-lg-3...}

# 总结

顺序不能反
@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的设备 } 大显示器