不喜欢广告？ 去 无广告 今天
CSS 媒体查询生成器
颜色开发人员
广告 移除？
广告 移除？
指导
CSS 媒体查询生成器
构建精确的CSS @media 为任何断点和特性组合生成规则，无需记忆语法。选择一个框架预设，选择查询类型，并切换所需的额外媒体特性——该工具将经典和现代范围语法组合成一个有效的规则块。
如何使用
- 选择一个 框架预设 — Bootstrap 5、Tailwind CSS、Material Design 或自定义 — 然后选择断点宽度。
- 选择 查询类型：最小宽度（移动端优先）、最大宽度（桌面端优先）或两个宽度之间的范围。
- 选择 语法风格：经典
min-width/max-width或新的媒体查询级别4范围语法（width >= ...). - 切换您想要组合的任何特性 附加功能 与断点一起使用：方向、偏好颜色方案、偏好减少运动、悬停或指针。
- 复制生成的
@media从输出面板中获取CSS块并将其放入您的样式表中。
特征
- 框架预设 — Bootstrap 5、Tailwind CSS 和 Material Design 的一键断点，以及适用于任意像素值的自定义模式。
- 三种查询模式 — 生成移动端优先
min-width、桌面端优先max-width或针对单一设备类的精确范围查询。 - 经典和现代语法 — 在传统
min-width/max-width规则和更简洁的媒体查询级别4范围语法（width >= X). - 组合媒体特性 — 在任何宽度查询基础上叠加方向、偏好颜色方案、偏好减少运动、悬停能力和指针精度。
- 实时更新 — 随着输入变化，输出会自动重新生成，因此您可以即时预览不同的组合。
- 复制与下载 — 一键获取CSS，或将其保存为
.css文件用于您的项目。
常问问题
-
什么是CSS媒体查询？
媒体查询是CSS中的一个功能，仅在浏览环境满足特定条件（如视口宽度、屏幕方向或用户偏好）时才应用样式。它是响应式设计的核心机制，使单个样式表能够适应手机、平板、桌面设备及更多场景。
-
最小宽度和最大宽度有什么区别？
最小宽度在视口至少达到该宽度时应用样式，这是移动优先CSS的基础——您从小型屏幕样式开始，并随着视口增大逐步叠加规则。最大宽度在视口不超过该宽度时应用样式，这是桌面优先方法，即逐步为小型设备缩小样式。
-
媒体查询级别4中的新范围语法是什么？
媒体查询级别4引入了如 (width >= 768px) 和 (400px <= width <= 1200px) 这样的比较运算符，作为 min-width 和 max-width 配对的更简洁替代方案。它提升了范围的可读性，并在所有现代浏览器中得到支持，尽管旧版浏览器仍需使用经典语法。
-
prefers-color-scheme 是做什么的？
prefers-color-scheme 会检测用户在操作系统级别是否选择了亮色或暗色主题。将其与媒体查询结合，可以让系统自动提供暗色主题配色，而无需在页面内添加切换按钮。
-
为什么要在单个查询中组合多个媒体特性？
使用 and 关键字组合特性，可以让单个规则针对精确上下文，例如在宽视口且支持悬停的暗色模式下。这使样式表更加紧凑，并避免了需要手动同步的冗余规则堆叠。
