CSS中的媒体查询（Media Queries）详解

一、媒体查询的基本概念
媒体查询是CSS3的重要功能，允许内容适应不同的设备条件（如屏幕尺寸、分辨率等）。它由媒体类型和一个或多个检测媒体特性的条件表达式组成。

二、媒体查询的语法结构

@media 媒体类型 and (媒体特性) {
  /* 对应的CSS规则 */
}

• 媒体类型：screen（屏幕）、print（打印）、all（所有设备）等
• 媒体特性：max-width、min-width、orientation等
• 逻辑运算符：and（与）、not（非）、only（仅）等

三、媒体特性的详细解析

1. 宽度相关特性：

   • min-width：当视口宽度大于等于指定值时生效
   • max-width：当视口宽度小于等于指定值时生效

   /* 当屏幕宽度≥768px时应用 */
   @media (min-width: 768px) { ... }
   
   /* 当屏幕宽度≤1024px时应用 */
   @media (max-width: 1024px) { ... }
   

2. 高度相关特性：

   • min-height：最小高度
   • max-height：最大高度

3. 方向特性：

   • orientation: landscape（横屏）
   • orientation: portrait（竖屏）

四、响应式断点的实际应用
常见断点设置策略：

/* 移动设备优先：从小屏幕开始设计 */
.container { width: 100%; }

/* 平板设备 */
@media (min-width: 768px) {
  .container { width: 750px; }
}

/* 桌面设备 */
@media (min-width: 992px) {
  .container { width: 970px; }
}

/* 大屏幕设备 */
@media (min-width: 1200px) {
  .container { width: 1170px; }
}

五、复杂媒体查询的构建

1. 多条件组合：

/* 横屏且宽度在600-900px之间 */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 900px) {
  .sidebar { display: none; }
}

2. 逗号分隔（或逻辑）：

/* 打印设备或屏幕宽度≤600px */
@media print, (max-width: 600px) {
  .navigation { display: none; }
}

六、移动端优化的关键技巧

1. 视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 高分辨率屏幕适配：

/* 视网膜屏幕适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo { background-image: url('logo@2x.png'); }
}

七、实际开发中的最佳实践

1. 移动优先原则：先写移动端样式，再用媒体查询逐步增强
2. 使用相对单位：避免固定像素，使用rem、em、百分比
3. 测试方法：浏览器开发者工具的响应式设计模式

通过掌握这些知识点，你就能创建出真正适应各种设备的响应式网页设计。