css3响应式布局 媒体查询----media query

1、media query的语法：

（1）设置meta标签

   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

（2）

@media 媒介类型and|not|only (媒介特征) {  
	... 
}  

媒介类型：

• print：用于打印机和打印预览
• screen：用于电脑屏幕，平板电脑，智能手机等
• all：用于所有媒体设备类型

媒介特征：

• device-height：定义输出设备的屏幕可见高度。
• device-width：定义输出设备的屏幕可见宽度。
• height：定义输出设备中的页面可见区域高度。
• width：定义输出设备中的页面可见区域宽度。
• max-device-height：定义输出设备的屏幕可见的最大高度。
• max-device-width：定义输出设备的屏幕可见的最大宽度。
• max-height：定义输出设备中的页面可见的最大高度。
• max-width：定义输出设备中的页面可见的最大宽度。
• min-device-height：定义输出设备的屏幕可见的最小高度。
• min-device-width：定义输出设备的屏幕可见的最小宽度。
• min-height：定义输出设备中的页面可见的最小高度。
• min-width：定义输出设备中的页面可见的最小宽度。

2、media query的引入方法：

（1）在head中引入

<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />  

（2）在@import中引入

<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">
	@import url("css/style.css");
</style>

（3）直接在CSS中使用

@media screen and (max-width: 800px) {  
	// CSS样式
}