CSS3之多媒体查询

1.用途

• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的
• 注意：重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

2.用法

@media screen and (min-width: 480px) {
    body {
        background-color: yellow;
    }
}
/*屏幕宽度为480px以上时body的背景色为黄色*/

（1）写在style标签或CSS文件中

（2）直接在link中判断设备的尺寸，然后引用不同的CSS文件

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

3.常用媒体类型

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

3.常用特性

• 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位颜色）