CSS3中的媒体查询

1- 理解：

	(1)- 能使一个网站可以兼容多个终端(手机\ipad\电脑..)；
	(2)- 针对不同的媒体类型定义不同的样式；
	(3)- 使网站在传统浏览器、手机和平板电脑浏览器上展现出很好的效果。

2- 作用：

使用媒体查询，可以在不改变页面内容，不造成布局错乱的情况下，
根据浏览器窗口的宽度，设置不同的样式，
为不同的设备定制很好的效果。

3- 媒体类型

	all 用于所有配置；
	screen 用于电脑、平板电脑、智能手机等；(常用)
	print 用于打印机和打印预览；
	speech 用于屏幕阅读等发声设备；

4- 逻辑判断（操作）符：

	and   并且； 把多个媒体属性组合成一条媒体查询，当每一个条件都满足时，才会执行此样式；
	or      或；
	only  仅在媒体查询匹配成功的情况下应用指定样式；
	not  用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备.

5- 媒体属性共有哪些？

	width:浏览器可视宽度
	height:浏览器可视高度
	device-width:设备屏幕的宽度
	device-height:设备屏幕的高度
	****  orientation:  检测设备目前处于横向还是纵向状态
	aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
	device-aspect-ratio:检测设备的宽度和高度的比例
	color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
	color-index:检查设备颜色索引表中的颜色，他的值不能是负数
	monochrome:检测单色楨缓冲区域中的每个像素的位数。
	resolution:检测屏幕或打印机的分辨率
	grid：检测输出的设备是网格的还是位图设备。
6-  如何检测设备横屏还是竖屏
	使用：orientation（检测设备目前处于横向还是纵向状态）

***7- media查询引入方式
@media:一个声明

	(1)-  link元素中的CSS媒体查询( 不足：增加页面http的请求次数，增加了页面负担 )
			<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
	(2)-  css样式表中媒体查询(最好的方法)
				@meadia all and ( max-width: ){
						具体样式
				}