CSS3中@Media Queries与自适应布局

1、Media Queries模块：是CSS3中一个和各种媒体相关的重要模块；

2、Media Queries的使用方法：

（1）@media 设备类型 and (设备特征){样式代码};，在样式代码开头必须写上@media，然后制定设备的类型(媒体类型)；

（2）可以指定的值与其代表的设备类型如下表：

取值	代表的设备
all	所有设备
screen	电脑显示器
print	打印用纸或者打印预览图
handheld	便携设备
tv	电视机类型设备
speech	语音和音频合成器
braille	盲人用点字法触觉回馈设备
embossed	盲文打印机
projection	各种投影设备
tty	使用固定密度字母栅格的媒介

设备特征的书写方式与样式的书写方式很类似，分为两个部分，当中有冒号分分隔，冒号前书写设备的某种特征，冒号后书写该特征的具体值。例如，需要指定浏览器的窗口宽度大于400px时，书写成(min-width:400px)，大部分设备特征的指定值接受min/max的前缀用来表示大于等于或小于等于的逻辑，以此来避免使用<和>字符；

（3）13种设备的特征说明：

特效	可指定的值	是否允许使用min/max前缀	特性说明
width	带单位的长度数值	允许	浏览器的窗口宽度
height	带单位的长度数值	允许	浏览器的窗口高度
device-width	带单位的长度数值	允许	设备屏幕的分辨值
device-height	带单位的长度数值	允许	设备屏幕分辨率的最高值
orientation	只能指定2个值(padding或landscape)	不允许	浏览器的方向是纵向还是横向，当浏览器的高度值大于等于浏览器的宽度值的时 候，这个特性为portrait否则为landscape
aspect-ratio	比例值	允许	浏览器窗口的纵横比，比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio	比例值	允许	屏幕分辨率的纵横比，比例值为设备分辨率的宽度值/高度值
color	整数值	允许	设备使用多少位的颜色值，如果不是彩色设备，该值为0
color-index	整数值	允许	色彩表中的色彩数
monochrome	整数值	允许	单色帧缓冲器中每像素的字节数
resolution	分辨率值	允许	设备的分辨率
scan	只能指定两个值(progressive或interlace)	不允许	电视机类型设备的扫描方式。progressive表示逐行扫描，interlace表示隔行扫描
grid	只能指定两个值(0或1)	不允许	设备是基于栅格还是基于位图。基于栅格时该值为1，否则该值为0

3、Media Queries的应用：

（1）HTML代码：

<div class="content">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>

（2）CSS代码：

.content{
	margin: 30px auto;
}
.content>div{
	height: 600px;
	font-size: 32px;
	font-weight: bold;
	color: white;
	text-align: center;
	line-height: 600px;
}
.left{
	float: left;
	background-color: lightblue;
}
.center{
	float: left;
	margin-left: 50px;
	background-color: lightcoral;
}
.right{
	float: right;
	background-color: lightgreen;
}


@media screen and (min-width: 1000px) {
	.content{
		width: 1000px;
	}
	.left{
		width: 265px;
	}
	.center{
		width: 370px;
	}
	.right{
		width: 265px;
	}
}

@media screen and (min-width: 640px) and (max-width:999px) {
	.content{
		width: 640px;
	}
	.left{
		width: 245px;
	}
	.center{
		width: 345px;
	}
	.content .right{
		width: 100%;
		height: 240px;
		line-height: 240px;
		clear: both;
		margin-top: 50px;
	}
}

@media screen and (max-width:639px) {
	.content{
		width: 100%;
	}
	.content>div{
		width: 100%;
		height: 240px;
		line-height: 240px;
		margin-bottom: 30px;
	}
	.center{
		margin-left: 0px;
	}
}

（3）效果图如下：

1）当浏览器窗口的宽度大于等于1000px（min-width: 1000px）时的效果图：

2）当浏览器窗口的宽度大于等于640px且小于1000px（min-width: 640px) and (max-width:999px）时的效果图：

3）当浏览器窗口的宽度小于等于639px（max-width:639px）时的效果图：