多媒体查询@media

定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media not|only mediatype and (expressions) {
	/* CSS代码写在这里 */
}

/* 示例 */

/* only去掉效果一样 */
@media only screen and (max-width: 640px) {	
	body{
		margin: 0;
	}
}

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

常用特性	值
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
max-device-width	定义输出设备的屏幕最大可见宽度
max-device-height	定义输出设备的屏幕可见的最大高度
orientation	检测设备目前处于横向（值为landscape）还是纵向（值为portrait）状态
aspect-ratio	检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio	检测设备的宽度和高度的比例
color	检测颜色的位数。（例如：min-color: 32就会检测设备是否拥有32位颜色）

使用

方法一：直接在link中判断设备的尺寸，然后引用不同的CSS文件：

<!-- 当屏幕的宽度大于等于400px的时候，应用 A.css -->
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 400px)">

方法二：另一种方式，即是直接写在 style 标签里或CSS文件中：

/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
@media screen and (max-width: 600px) { 
	body {    
		margin: 0;
	}
}