CSS 响应式设计之媒体查询技术

CSS 媒体查询（Media Queries）是一种根据不同设备的特性（如屏幕宽度、分辨率、方向等）来应用不同的 CSS 样式的技术。它通常用于响应式设计，帮助网页在不同设备和屏幕尺寸下良好地展示。

基本语法

css 复制代码

@media (条件) {
  /* 样式规则 */
}

@media 关键字表示媒体查询。
(条件) 是测试设备特性的条件表达式，例如屏幕宽度、分辨率等。
{} 内包含满足条件时应用的样式规则。

常见的媒体查询条件

屏幕宽度 (min-width 和 max-width) ：
- min-width: 指定屏幕最小宽度，适用于宽度大于等于指定值的设备。
- max-width: 指定屏幕最大宽度，适用于宽度小于等于指定值的设备。

css 复制代码

/* 当屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度小于等于600px时应用 */
@media (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

屏幕方向 (orientation) ：
- portrait: 垂直方向（高宽比大于1）。
- landscape: 横向方向（宽高比大于1）。

css 复制代码

/* 适用于竖屏设备 */
@media (orientation: portrait) {
  body {
    font-size: 14px;
  }
}

/* 适用于横屏设备 */
@media (orientation: landscape) {
  body {
    font-size: 16px;
  }
}

设备分辨率 (resolution) ：
- 用于指定屏幕的分辨率（如：DPI 或像素密度）。

css 复制代码

/* 适用于高分辨率设备，如 Retina 显示屏 */
@media (min-resolution: 2dppx) {
  img {
    width: 200%;
  }
}

常见媒体查询示例

响应式布局

在响应式设计中，媒体查询帮助调整布局和样式，使得网站在不同的设备上都能有良好的展示效果。

css 复制代码

/* 基本样式 */
body {
  font-family: Arial, sans-serif;
}

/* 大屏幕设备 */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

/* 中等屏幕设备（例如平板电脑） */
@media (min-width: 768px) and (max-width: 1199px) {
  body {
    font-size: 16px;
  }
}

/* 小屏幕设备（例如手机） */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

图片大小

根据设备的分辨率来选择不同的图片资源。

css 复制代码

/* 默认图片 */
img {
  width: 100%;
  height: auto;
}

/* 高分辨率屏幕（如 Retina 显示屏） */
@media (min-resolution: 2dppx) {
  img {
    content: url('high-res-image.jpg');
  }
}

组合条件

可以使用逻辑运算符 and, not, 和 only 来组合多个条件。

and：同时满足多个条件。
not：排除某个条件。
only：应用特定条件，通常用于避免某些旧版浏览器解析媒体查询。

css 复制代码

/* 屏幕宽度大于768px 且方向为横屏 */
@media (min-width: 768px) and (orientation: landscape) {
  body {
    background-color: lightyellow;
  }
}

/* 不适用于小于768px的设备 */
@media not all and (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

媒体查询的优先级

外部 CSS 中的媒体查询优先级高于全局样式。
在同一文件中，后定义的媒体查询覆盖前面定义的样式。