CSS媒体查询通过@media规则让网页适配不同设备，支持多种媒体特性和逻辑组合，可基于屏幕尺寸、方向等条件应用样式，并结合开发者工具和真机测试进行调试优化。
CSS媒体查询，简单来说，就是让你的网页能根据设备的不同（屏幕尺寸、设备类型等等）呈现出不同的样式。它就像一个聪明的裁缝，能根据你的身材定制衣服。
CSS媒体查询的核心在于
@media规则。它允许你针对特定的设备或屏幕特性应用不同的 CSS 样式。
解决方案
-
基本语法：
立即学习“前端免费学习笔记（深入）”；
@media (条件) { /* 在满足条件时应用的 CSS 规则 */ }例如：
@media (max-width: 768px) { body { font-size: 14px; /* 在屏幕宽度小于 768px 时，设置字体大小为 14px */ } } -
常用的媒体特性：
-
媒体类型的组合：
可以使用
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 的
标签中使用media
属性。这样，
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
andmax-width: 768px
：针对平板电脑。min-width: 769px
andmax-width: 1024px
：针对大屏平板或小屏幕笔记本。min-width: 1025px
：针对桌面设备。
-
根据内容调整：
更好的做法是根据内容来调整断点。观察你的网站在不同屏幕尺寸下的表现，找到内容开始出现错乱或布局不合理的地方，然后在这个地方设置断点。
例如，如果你的导航栏在屏幕宽度小于 600px 时开始折叠，那么你就可以设置一个
max-width: 599px
的断点，然后在这个断点下调整导航栏的样式。 -
逐步增强（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
）来解决这个问题。
调试媒体查询需要耐心和细心。希望这些技巧能帮助你更高效地调试媒体查询，创建出更好的响应式网站。
