CSS媒体查询

什么是CSS媒体查询？

CSS媒体查询（Media Query）是现代网页设计中不可或缺的技术，它允许开发者根据设备特性（如屏幕尺寸、分辨率、方向等）应用不同的CSS样式

媒体类型基础

在CSS2中，我们已经可以使用媒体类型来区分不同的设备：

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">

在 W3C 中共列出了 10 种媒体类型，如下表所示：

值	设备类型
All	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
Tv	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

媒体查询基础语法

媒体查询的基本语法结构如下：

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

常用媒体特性

实用示例

1. 响应式断点设计

/* 小屏幕设备（手机） */
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}

/* 中等屏幕设备（平板） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 750px;
  }
}

/* 大屏幕设备（桌面） */
@media screen and (min-width: 1024px) {
  .container {
    width: 980px;
  }
}

2. 处理打印样式

@media print {
  body {
    font-size: 12pt;
    color: #000;
  }
  .no-print {
    display: none;
  }
}

3. 针对高分辨率设备

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  /* 高分辨率设备专用样式 */
}

高级技巧

1. 使用not关键字排除特定条件

@media not screen and (max-width: 600px) {
  /* 适用于非屏幕设备或屏幕宽度大于600px的情况 */
}

2. 使用only关键字隐藏旧浏览器

@media only screen and (min-width: 768px) {
  /* 仅在现代浏览器中应用 */
}

3. 组合多个条件

@media screen and (min-width: 500px) and (max-width: 800px) and (orientation: landscape) {
  /* 横屏且宽度在500-800px之间的样式 */
}

媒体查询的引入方式

1. HTML中通过link标签引入：

   <link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">
   

2. CSS中使用@import引入：

   @import url("tablet.css") screen and (min-width: 768px);
   

3. 直接在CSS中使用@media规则：

   @media screen and (max-width: 600px) {
     /* 样式规则 */
   }
   

性能优化建议

1. 移动优先设计：先编写移动端样式，再用媒体查询逐步增强大屏幕体验
2. 避免不必要的媒体查询：合理设置断点，不要过度细分
3. 合并媒体查询：相同条件的媒体查询尽量合并
4. 使用相对单位：优先使用em/rem而非px，提高可访问性

总结

. 移动优先设计：先编写移动端样式，再用媒体查询逐步增强大屏幕体验
2. 避免不必要的媒体查询：合理设置断点，不要过度细分
3. 合并媒体查询：相同条件的媒体查询尽量合并
4. 使用相对单位：优先使用em/rem而非px，提高可访问性

总结

CSS媒体查询是响应式网页设计的核心技术，它让我们的网站能够智能地适应各种设备和屏幕尺寸。通过合理设置断点和优化媒体查询，我们可以创建出既美观又高性能的响应式网站