CSS学习笔记(五)：CSS媒体查询入门指南

CSS媒体查询基础语法

媒体查询使用@media规则，后跟一个或多个条件，用于在不同设备或屏幕尺寸下应用不同的CSS样式。基本语法结构如下：

css 复制代码

@media media-type and (media-feature) {
  /* CSS规则 */
}

特点

响应式设计：通过检测视口宽度、设备方向等条件，应用不同的CSS规则，适配不同设备。
条件触发 ：需定义明确的断点（如@media (max-width: 768px)），在特定条件下生效。
渐进增强：通常与其他布局方式（如Flexbox或Grid）结合使用，作为补充逻辑。

优点

适配性强，能精确控制不同断点下的样式。
纯CSS实现，无需修改HTML结构。
主流浏览器支持良好（CSS3标准）。

缺点

代码量可能增加，需维护多个断点。
对复杂布局可能需重复编写样式。
性能略低于固定布局（需实时计算样式）。

媒体类型（Media Types）

常用媒体类型包括：

all：适用于所有设备
print：打印机或打印预览模式
screen：彩色计算机屏幕
speech：语音合成器

如果省略媒体类型，默认值为all。

媒体特性（Media Features）

媒体特性是媒体查询的核心部分，用于检测设备的具体特性：

视口相关特性

width：视口宽度
height：视口高度
aspect-ratio：视口宽高比
orientation：设备方向（portrait或landscape）

显示质量特性

resolution：设备分辨率
scan：电视扫描方式
grid：网格设备判断

颜色相关特性

color：设备颜色位数
color-index：颜色查找表中的颜色数量
monochrome：单色帧缓冲区位数

逻辑运算符

媒体查询支持逻辑运算符组合多个条件：

1. and运算符

css 复制代码

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* CSS规则 */
}

2. 逗号分隔（or逻辑）

css 复制代码

@media (max-width: 600px), (orientation: portrait) {
  /* CSS规则 */
}

3. not运算符

css 复制代码

@media not screen and (color) {
  /* CSS规则 */
}

4. only运算符

css 复制代码

@media only screen and (min-width: 320px) {
  /* CSS规则 */
}

常用断点示例

移动优先设计常用断点：

css 复制代码

/* 小屏幕设备（手机，768px以下） */
@media (max-width: 767px) { ... }

/* 中等屏幕设备（平板，768px以上） */
@media (min-width: 768px) and (max-width: 991px) { ... }

/* 大屏幕设备（桌面，992px以上） */
@media (min-width: 992px) and (max-width: 1199px) { ... }

/* 超大屏幕设备（大桌面，1200px以上） */
@media (min-width: 1200px) { ... }

响应式设计技巧

视口元标签应与媒体查询配合使用：

html 复制代码

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

使用相对单位（如%、em、rem、vw、vh）代替固定像素值，使布局更灵活。

现代CSS替代方案

考虑使用CSS容器查询作为媒体查询的补充：

css 复制代码

@container (min-width: 300px) {
  /* 组件级响应式样式 */
}

CSS自定义属性可以与媒体查询结合，实现主题切换等功能：

css 复制代码

:root {
  --primary-color: blue;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: lightblue;
  }
}

应用场景

1. 响应式布局：根据屏幕宽度调整布局。

css 复制代码

/* 移动端样式 */
@media (max-width: 600px) {
  body { font-size: 14px; }
  .sidebar { display: none; }
}

/* 桌面端样式 */
@media (min-width: 1200px) {
  .container { width: 1170px; }
}

2. 高分辨率设备适配：为Retina屏幕提供高清图片。

css 复制代码

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    .logo { background-image: url("logo@2x.png"); }
}

3. 打印样式优化：隐藏非必要元素。

css 复制代码

@media print {
  .nav, .ads { display: none; }
  body { font-size: 12pt; }
}

注意事项

逻辑顺序：媒体查询的规则遵循CSS层叠性，需按从小到大的顺序排列，避免规则覆盖冲突。
性能影响：过多的媒体查询可能导致样式表体积增大，影响加载速度。
浏览器兼容性：部分旧版本浏览器（如IE9以下）不支持复杂媒体查询，需通过 polyfill 或渐进增强处理。
调试技巧：使用浏览器开发者工具模拟不同设备尺寸；添加临时边框检查媒体查询是否生效。

优化建议

合并相似查询 ：减少重复代码。例如，将多个min-width条件合并：
css 复制代码
```
@media (min-width: 768px) and (max-width: 1024px) {
  /* 共享样式 */
}
```
使用相对单位 ：优先使用em或rem而非固定像素，增强适配灵活性。
移动优先 ：先编写移动端样式，再通过min-width逐步扩展，减少冗余代码。
桌面优先 ：默认样式针对大屏幕，通过 max-width 逐步降级。

总结

CSS媒体查询是实现响应式设计的核心工具，需结合具体场景合理使用。通过逻辑清晰的查询条件、代码合并及移动优先策略，可提升开发效率和页面性能。注意测试多设备兼容性，确保用户体验一致。