CSS媒体查询怎么用_CSS媒体查询响应式设计教程

蓮花仙者

发布时间：2025-09-11 19:13:01

790人浏览过

来源于php中文网

原创

CSS媒体查询通过@media规则让网页适配不同设备，支持多种媒体特性和逻辑组合，可基于屏幕尺寸、方向等条件应用样式，并结合开发者工具和真机测试进行调试优化。

css媒体查询怎么用_css媒体查询响应式设计教程

CSS媒体查询，简单来说，就是让你的网页能根据设备的不同（屏幕尺寸、设备类型等等）呈现出不同的样式。它就像一个聪明的裁缝，能根据你的身材定制衣服。

CSS媒体查询的核心在于

@media

规则。它允许你针对特定的设备或屏幕特性应用不同的 CSS 样式。

解决方案

基本语法：

立即学习“前端免费学习笔记（深入）”；

@media (条件) {
  /* 在满足条件时应用的 CSS 规则 */
}

例如：

@media (max-width: 768px) {
  body {
    font-size: 14px; /* 在屏幕宽度小于 768px 时，设置字体大小为 14px */
  }
}

常用的媒体特性：
- ```
width
```
  和
```
height
```
  ：视口（viewport）的宽度和高度。
- ```
max-width
```
  和
```
max-height
```
  ：视口的最大宽度和最大高度。
- ```
min-width
```
  和
```
min-height
```
  ：视口的最小宽度和最小高度。
- ```
orientation
```
  ：屏幕的方向（
```
portrait
```
  纵向，
```
landscape
```
  横向）。
- ```
device-width
```
  和
```
device-height
```
  ：设备的屏幕宽度和高度（不包括浏览器工具栏等）。
- ```
screen
```
  ：电脑屏幕。
- ```
print
```
  ：打印预览模式 / 打印页。
- ```
all
```
  ：适用于所有设备。

媒体类型的组合：

可以使用

and

、

or

和

来组合多个媒体特性。

and

：必须同时满足所有条件。

@media (min-width: 768px) and (max-width: 992px) {
  /* 在屏幕宽度在 768px 和 992px 之间时应用的 CSS 规则 */
}

or

（

）：满足其中一个条件即可。

@media (max-width: 480px), (orientation: portrait) {
  /* 在屏幕宽度小于 480px 或屏幕方向为纵向时应用的 CSS 规则 */
}

not

：排除某种媒体类型。

@media not print {
  /* 除了打印预览/打印页之外的所有设备应用的 CSS 规则 */
}

在 HTML 中使用媒体查询：

你也可以直接在 HTML 的
```
<link>
```
标签中使用
```
media
```
属性。
```
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mobile.css" media="max-width: 768px">
```
这样，
```
mobile.css
```
样式表只会在屏幕宽度小于 768px 时应用。

一个稍微复杂点的例子：

假设你想为手机、平板和桌面设备分别设置不同的样式。

/* 默认样式（桌面设备） */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* 手机设备 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
    line-height: 1.4;
  }
  .container {
    width: 100%; /* 让容器占据整个屏幕宽度 */
    padding: 10px;
  }
}

/* 平板设备 */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.45;
  }
  .container {
    width: 720px; /* 设置容器宽度 */
    margin: 0 auto; /* 居中显示 */
  }
}

CSS 媒体查询就是这么用的，它能让你轻松地创建响应式的网页，适应各种不同的设备。

媒体查询的断点应该如何选择？

选择断点其实没有绝对的标准答案，更多的是一种权衡。你需要考虑你的网站内容、设计风格以及目标用户。

根据主流设备尺寸：

这是最常见的做法。你可以参考一些主流设备的屏幕尺寸，比如 iPhone、iPad、Android 手机和平板等。然后，根据这些尺寸设置断点。

例如：
- ```
max-width: 480px
```
  ：针对小屏幕手机。
- ```
min-width: 481px
```
  and
```
max-width: 768px
```
  ：针对平板电脑。
- ```
min-width: 769px
```
  and
```
max-width: 1024px
```
  ：针对大屏平板或小屏幕笔记本。
- ```
min-width: 1025px
```
  ：针对桌面设备。
根据内容调整：

更好的做法是根据内容来调整断点。观察你的网站在不同屏幕尺寸下的表现，找到内容开始出现错乱或布局不合理的地方，然后在这个地方设置断点。

例如，如果你的导航栏在屏幕宽度小于 600px 时开始折叠，那么你就可以设置一个
```
max-width: 599px
```
的断点，然后在这个断点下调整导航栏的样式。

Tome
先进的AI智能PPT制作工具

下载

逐步增强（Progressive Enhancement）：

先为最小的屏幕（比如手机）设计样式，然后逐步增加样式，以适应更大的屏幕。

/* 默认样式（手机） */
body {
  font-size: 14px;
}

/* 平板 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 桌面 */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

避免过多的断点：

过多的断点会增加 CSS 的复杂性，维护起来也比较困难。一般来说，3-5 个断点就足够了。

使用 CSS 预处理器：

如果你使用了 CSS 预处理器（如 Sass 或 Less），你可以使用变量来管理断点，这样可以更方便地修改和维护断点。

$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 1200px;

@media (max-width: $breakpoint-small) {
  body {
    font-size: 14px;
  }
}

@media (min-width: $breakpoint-medium) {
  body {
    font-size: 16px;
  }
}

总而言之，选择断点是一个迭代的过程。你需要不断地测试和调整，才能找到最适合你的网站的断点。

如何调试 CSS 媒体查询？

调试媒体查询，有时候就像大海捞针，但掌握一些技巧，就能事半功倍。

浏览器开发者工具：

这是最常用的调试工具。
- 设备模式（Device Mode）： 大部分现代浏览器都提供了设备模式，可以模拟各种设备的屏幕尺寸和分辨率。在 Chrome 中，你可以按
```
F12
```
  打开开发者工具，然后点击工具栏上的 "Toggle device toolbar" 图标（看起来像手机和平板电脑）。
- 媒体查询面板： 一些浏览器（如 Firefox）提供了专门的媒体查询面板，可以显示当前页面中定义的所有媒体查询。
- 元素审查（Inspect Element）： 使用元素审查工具，可以查看某个元素在不同媒体查询下的样式。

使用

console.log()

：

虽然听起来有点原始，但

console.log()

仍然是一个很有用的调试工具。你可以在媒体查询中添加

console.log()

语句，来确认媒体查询是否生效。

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  /* 在这里添加 console.log() */
  console.log("Media query (max-width: 768px) is active!");
}

使用 CSS 预处理器：

如果你使用了 CSS 预处理器（如 Sass 或 Less），你可以使用预处理器的调试功能来调试媒体查询。例如，Sass 提供了
```
@debug
```
指令，可以输出调试信息。
真机测试：

虽然浏览器开发者工具可以模拟各种设备，但真机测试仍然是必不可少的。因为不同的设备可能存在一些细微的差异，这些差异可能会影响你的网站的显示效果。
使用在线工具：

有一些在线工具可以帮助你调试媒体查询，例如 Responsinator。这些工具可以让你在不同的设备上预览你的网站，从而快速发现问题。
注意缓存：

有时候，你修改了 CSS 文件，但浏览器仍然显示旧的样式。这可能是因为浏览器缓存了旧的 CSS 文件。你可以尝试清除浏览器缓存，或者使用强制刷新（
```
Ctrl + Shift + R
```
或
```
Cmd + Shift + R
```
）来解决这个问题。