媒体查询生成器 根据特征条件和预设断点生成CSS媒体查询。

What Is 媒体查询生成器?

媒体查询生成器帮助您构建用于响应式设计和功能检测的CSS媒体查询。媒体查询根据设备特征（如视口宽度、高度、方向、色彩方案偏好等）条件性地应用CSS规则。本工具提供了常见用例的预设查询（移动设备、平板电脑、桌面设备、暗黑模式、打印、减少动画）和一个自定义构建器，用于创建复杂条件。您可以设置媒体类型（屏幕、打印、所有）、添加多个功能条件，并选择如何组合它们（AND或OR）。生成的查询包括@media规则和括号的正确语法，准备好粘贴到您的CSS中。

Why Use 媒体查询生成器?

• 移动设备、平板电脑、台式机、暗黑模式等常见预设
• 支持所有 CSS 媒体特性，包括现代特性
• AND/OR 运算符用于组合多个条件
• 快速查阅的常见断点参考表

Common Use Cases

响应式布局

为不同屏幕尺寸创建基于断点的样式。

暗黑模式支持

生成 prefers-color-scheme 查询以应用暗黑模式样式。

打印样式表

创建 @media print 查询以优化打印样式。

无障碍功能

针对减少运动和对比度偏好，实现可访问的设计。

Technical Guide

CSS媒体查询使用@media规则来条件性地应用样式。语法是@media [类型] 和 (条件) { 规则 }。媒体类型包括屏幕、打印和所有。媒体功能测试设备能力：min-width/max-width用于响应式断点，orientation用于横向/纵向，prefers-color-scheme用于暗黑/亮色模式，prefers-reduced-motion用于动画敏感度，hover用于悬停能力，pointer用于输入精度。多个条件使用and关键字组合所有条件，或使用逗号分隔任何条件。not关键字否定一个查询。像prefers-color-scheme和prefers-reduced-motion这样的现代功能实现了用户偏好设置的渐进增强。对于移动设备优先方法，使用min-width查询。对于桌面优先方法，使用max-width。同时组合两者创建范围查询，如@media (min-width: 768px) and (max-width: 1023px)。

Tips & Best Practices

• 1
  使用移动设备优先的方法，采用 min-width 查询以获得更好的性能
• 2
  始终包含 prefers-reduced-motion 以支持无障碍功能
• 3
  测试 prefers-color-scheme 以自动支持暗黑模式
• 4
  使用范围查询（min 和 max）来针对特定的设备类别

Related Tools

CSS 弹性盒子实验室

具有交互控制的视觉 CSS 弹性盒子探索器，支持所有弹性容器属性。

🎨 CSS & Design

CSS 网格操场

带有交互控制的可视化 CSS 网格构建器，用于模板列、行和间距。

🎨 CSS & Design

响应式设计测试器

使用内置的iframe查看器预览网站在常见设备断点下的效果。

🎨 CSS & Design

打印样式表生成器

根据选项生成 @media 打印样式表，包括隐藏元素、设置文本样式和控制页面断点。

🎨 CSS & Design

Frequently Asked Questions

Q 我应该使用 min-width 还是 max-width？

min-width 遵循移动设备优先的方法（推荐）。max-width 遵循台式机优先的方法。根据您的设计方法选择。

Q 我应该使用什么断点？

常见断点：640px（移动设备），768px（平板电脑），1024px（笔记本电脑），1280px（台式机），1536px（大型台式机）。

Q 我可以组合多个条件吗？

是的，使用 and 来要求所有条件，或使用逗号来匹配任何条件。

Q 什么是 prefers-color-scheme？

它检测用户是否将操作系统设置为暗黑模式或浅色模式，从而允许自动切换主题。

Q 如何支持减少运动？

使用 @media (prefers-reduced-motion: reduce) 来禁用或减少对敏感用户的动画。

About This Tool

媒体查询生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.