调整下方滑块，模拟不同视口尺寸，观察@media规则的匹配状态。
CSS媒体查询（Media Query）是CSS3引入的一种机制，允许开发者根据设备的特性（如屏幕宽度、方向、分辨率等）应用不同的样式规则。它是响应式网页设计的核心技术之一，通过@media规则实现。通过媒体查询，同一套HTML结构可以适配从手机到桌面显示器等各种屏幕尺寸。
移动优先（Mobile First）：先为最小屏幕设计基础样式，然后通过min-width媒体查询逐步增强大屏体验。这是目前推荐的策略，因为它确保移动设备加载最少的CSS，性能更优。
桌面优先（Desktop First）：先设计完整的桌面样式，再通过max-width媒体查询逐步缩小适配小屏。这种方式代码量通常更大，维护成本较高。
min-width / max-width：视口宽度条件min-height / max-height：视口高度条件orientation：屏幕方向（portrait / landscape）aspect-ratio：宽高比prefers-color-scheme：用户颜色偏好（light / dark）prefers-reduced-motion：是否减少动画（no-preference / reduce）hover：指针设备悬停能力（hover / none）pointer：指针精度（fine / coarse / none）resolution：设备分辨率（如 2dppx 表示Retina）本CSS媒体查询生成器帮助开发者快速构建标准的@media规则，以下是详细使用步骤：
步骤一：选择预设断点：点击页面顶部的预设按钮（手机、平板、桌面、大屏），工具会自动添加对应的媒体查询条件。你也可以通过「添加条件」按钮手动输入自定义的媒体特性和值。
步骤二：自定义媒体特性：在「自定义媒体查询条件」区域，你可以添加任意数量的条件。每个条件包含逻辑运算符（and/or/only/not）、媒体特性（如min-width、orientation等）和值。工具支持组合多个条件生成复杂的媒体查询。
步骤三：使用预设模板：点击「预设模板」按钮，快速应用深色模式、打印样式、减少动画等常见场景。模板会自动配置最佳的媒体特性和值组合。
步骤四：预览与导出：生成的CSS代码会实时显示在代码区域。你可以通过底部的「复制代码」按钮一键复制到剪贴板，或使用「下载CSS」按钮保存为.css文件。右侧的实时预览区域可以模拟不同视口尺寸，帮助验证媒体查询的匹配逻辑。
响应式布局适配：在Web开发中，最常见的媒体查询应用场景是根据视口宽度调整布局。例如，在小屏幕上使用单列布局，在中等屏幕上使用两列布局，在大屏幕上使用三列或更多列。本工具可以帮助你快速生成所有断点的@media代码，避免手写时的语法错误。
深色模式自动切换：通过prefers-color-scheme: dark媒体特性，可以检测用户系统是否启用了深色主题，并自动切换网站的配色方案。这比手动切换按钮更加智能和无缝，是提升用户体验的重要方式。本工具的「深色模式」预设模板已为你准备好完整的代码。
打印样式优化：使用@media print规则，可以为打印页面定义专门的样式。例如隐藏导航栏和广告、将背景色改为白色、调整字体大小等。这确保了网页内容在打印时呈现最佳效果，特别适用于文档、报告、发票等场景。
逻辑组合语法：CSS媒体查询支持使用and、or（逗号分隔）、not和only进行逻辑组合。and表示所有条件必须同时满足；逗号分隔的多个查询表示任一条件满足即可；not用于否定整个媒体查询；only用于隐藏旧版浏览器的媒体查询，防止它们错误地应用样式。
容器查询（Container Query）：除了基于视口的媒体查询，CSS还引入了容器查询（@container），允许根据元素的容器大小而非视口大小来应用样式。这在组件化开发中非常有用，因为一个组件可能在不同尺寸的容器中展示，而容器查询使其能够自适应容器尺寸。
层级与优先级：媒体查询内的CSS规则遵循与普通CSS相同的选择器优先级（Specificity）规则。如果多个媒体查询中的规则匹配同一元素，选择器优先级更高的规则会生效。建议在媒体查询内部使用与外部相同的选择器，避免优先级混乱。
影响很小。现代浏览器会解析所有CSS，但只有匹配当前媒体查询的规则才会被应用。未匹配的@media块中的规则会被忽略，但CSS文件仍然会被下载。为了优化性能，建议将关键CSS内联，非关键的响应式样式放入单独的CSS文件并使用media属性引入。
可以。使用and关键字可以组合多个媒体特性，例如@media (min-width: 768px) and (orientation: landscape)。使用逗号分隔多个查询则实现"或"逻辑，例如@media (max-width: 480px), (min-width: 1200px)表示小屏或大屏。
常见原因包括：(1) @media规则拼写错误；(2) 选择器优先级不够高，被其他规则覆盖；(3) 浏览器不支持该媒体特性；(4) 测试时视口尺寸不满足条件。建议使用浏览器的开发者工具（F12）检查元素样式和计算样式，确认@media规则是否被正确应用。
prefers-reduced-motion 用于检测用户是否偏好减少动画效果（如眩晕敏感用户）。当值为 reduce 时，应禁用或简化CSS动画和过渡效果。这是Web可访问性（A11y）的重要组成部分，体现了对所有用户的关怀。
媒体查询基于整个视口（viewport）的尺寸，而容器查询基于元素的直接容器（container）的尺寸。容器查询更适用于组件化场景，例如一个卡片组件在侧边栏和在主内容区可以有不同的布局。容器查询需要父元素设置container-type: size或container-type: inline-size。
本工具生成的CSS媒体查询代码符合W3C标准，支持所有现代浏览器（Chrome 49+、Firefox 49+、Safari 9+、Edge 16+）。对于较新的媒体特性（如prefers-reduced-motion、color-gamut等），建议使用caniuse.com查询具体浏览器的支持情况。