CSS3--媒体查询

1：什么是媒体查询：
媒体查询是css3新的语法：

@media only screen and (min-width: ) {
			属性：属性值；	
	}

@media only screen and (min-width: 100px) and (max-width: 640px) {
			属性：属性值；	
	}

关键字：
screen 		用于电脑屏幕，平板电脑，智能手机等。
only		唯一（忽略）
and			并且（不常用）
min-width	屏幕最小宽度值 (最小不小于设定值，样式才会有效果)
	--min-width是指媒体类型大于或等于指定的宽度时，样式生效
max-width	屏幕最大宽度值 (最大不大于设定值，样式才会有效果)
	--max-width是指媒体类型小于或等于指定的宽度时，样式生效
screen and (min-width: 100px) and (max-width: 640px) (最小不小于设定值，最大不大于设定值之间的范围，样式才会有效果)
	--当浏览器窗口在100px~640px之间时，样式的变化

2：媒体查询的作用：
通过媒体查询的语法可以针对不同的屏幕尺寸设置不同的样式，
特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面的外观。

3：引入资源
–说白了就是根据设备屏幕的宽度，引入不同的css文件
语法：

<link rel="stylesheet" type="text/css" href="index1.css" media="screen and(min-width:320px)"/>
<link rel="stylesheet" type="text/css" href="index2.css" media="screen and(min-width:640px)"/>

4：利用媒体查询，判断当前手机的尺寸是多少，同时调用不同的字体大小。

5：经验总结
媒体中的 and后面加空格
min-width 值越小放css的最上面
max-width 值越大放在css的最上面