CSS媒体查询完全指南
概述
在网页开发中，经常需要根据不同的设备或环境应用不同的样式。CSS媒体查询（Media Queries）就是为此而生的强大工具。本文将系统介绍媒体查询的使用方法。
CSS2中的媒体类型
在CSS2时代，可以通过media属性为特定媒体类型指定样式表。例如，打印时需要隐藏某些元素或调整字体大小，就可以使用媒体类型来实现。
方式一：直接在样式表中使用
@media print {
body { font-size: 12pt }
}方式二：通过link标签引入
<link href="css/print.css" rel="stylesheet" media="print" />常用的媒体类型包括：
- all：适用于所有设备
- handheld：手持设备
- print：打印输出和打印预览
- projection：投影演示设备
- screen：计算机显示器
可以在同一个样式表中组合多个媒体类型：
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}CSS3媒体查询增强功能
CSS3对媒体查询进行了大幅扩展，不仅可以指定媒体类型，还能添加条件表达式来检测媒体特征。这使得响应式设计成为可能，比如为桌面电脑和平板电脑提供不同的布局。
<link href="css/mobile.css" rel="stylesheet" media="(max-width: 768px)" />
<style>
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
</style>逻辑操作符
and 操作符
and用于组合多个媒体特征，或将媒体类型与媒体特征连接。
最基本的媒体查询，只包含一个媒体特征：
@media (min-width: 800px) { ... }添加媒体类型限制：
@media screen and (min-width: 800px) { ... }同时限制屏幕宽度和方向：
@media screen and (min-width: 800px) and (orientation: landscape) { ... }进一步限制设备类型：
@media tv and (min-width: 800px) and (orientation: landscape) { ... }逗号分隔列表
多个媒体查询用逗号分隔时，每个查询相互独立。只要任意一个查询返回真值，对应的样式就会生效。
@media (min-width: 800px), handheld and (orientation: landscape) { ... }not 操作符
not用于对整个媒体查询取反。当使用逗号分隔列表时，not只作用于紧邻的查询。
@media not all and (monochrome) { ... }上述查询等价于：
@media not (all and (monochrome)) { ... }对于逗号分隔的列表：
@media not screen and (color), print and (color)等价于：
@media (not (screen and (color))), print and (color)only 操作符
only用于防止不支持媒体查询的浏览器应用样式，主要针对旧版浏览器的兼容性处理。
<link rel="stylesheet" media="only screen and (color)" href="color-screen.css" />媒体特征详解
媒体特征（Media Features）用于描述设备的具体属性：
- width / height：视口宽度和高度
- device-width / device-height：设备屏幕的宽度和高度
- orientation：设备方向，取值为portrait（纵向）或landscape（横向）
- aspect-ratio：视口宽高比
- device-aspect-ratio：设备屏幕宽高比
- color：颜色位数，非彩色设备为0
- color-index：色彩表中的颜色数量
- monochrome：单色帧缓冲的位数
- resolution：设备分辨率
- scan：电视设备的扫描方式（progressive或interlace）
- grid：是否基于网格（0或1）
媒体查询的引入方式
方式一：link标签引入
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 600px) and (max-width: 1024px)">方式二：@media规则
@media screen and (min-width: 600px) and (max-width: 1024px) {
.container {
width: 90%;
margin: 0 auto;
}
}方式三：@import导入
@import url("mobile.css") screen and (max-width: 480px);实际应用案例
iPhone 4适配
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="retina.css" />iPad横竖屏适配
<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation: landscape)" href="landscape.css">Android设备适配
<link rel="stylesheet" media="only screen and (max-device-width: 320px)" href="android320.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 321px) and (max-device-width: 480px)" href="android480.css" />
<link rel="stylesheet" media="only screen and (min-device-width: 481px)" href="android720.css" />浏览器兼容性
现代浏览器对媒体查询的支持非常完善，包括IE9+、Chrome、Firefox、Safari、Edge等主流浏览器。唯一需要注意的是IE8及以下版本完全不支持媒体查询，如需兼容可以使用第三方库如respond.js。
总结
CSS媒体查询是实现响应式设计的基础技术。通过合理使用媒体类型、媒体特征和逻辑操作符，可以精确控制不同设备上的样式表现，打造良好的用户体验。
