媒体查询生成

怎么用

1. 勾选需要的条件并填写数值，例如 min-width 768px。
2. 选择组合方式：AND 要求全部满足，OR 满足其一即可，NOT 对首个条件取反。
3. 需要的话选一个断点预设，把 Bootstrap、Tailwind 或 Material 的常用值填进 min-width。
4. 查看生成的规则，并留意实时指示器显示当前浏览器窗口是否命中。
5. 复制 CSS 粘贴到你的样式表里。

常见用法

• 写新的断点规则 —— 直接拿到正确语法，不必猜嵌套顺序。
• 深色模式脚手架 —— 把 prefers-color-scheme 与宽度条件组合，覆盖某个区块。
• 高像素密度屏幕 —— 用 2dppx 及以上条件提供更清晰的图片。
• 讲解媒体查询逻辑 —— 在 AND 与 OR 之间切换，看逗号如何改变语义。

常见问题

问：OR 和 AND 在输出上有什么区别？ 答：AND 用 and 关键字把条件连在同一条查询里，要求每一项都为真；OR 输出逗号分隔的列表，浏览器把它当作多条查询，任意一条命中即可。

问：为什么 NOT 只作用于第一个条件？ 答：CSS 规范只允许对单条媒体查询取反，不能对一组取反。限制在首个条件可以保证输出合法，需要更多时再用 OR 追加查询。

问：选预设会改动其他设置吗？ 答：不会。预设只会把一个数值写进 min-width 并勾选它，其他条件保持原样。