媒体查询生成器

功能

• 宽度断点：`min-width`、`max-width`、区间
• ⚠️ 区间的上界自动减 0.02，与下一个 `min-width` 严丝合缝，不留「谁都不管」的一段
• ⚠️ 两个数字填反时自动换过来，不生成永不命中的查询
• 偏好类：暗色 / 浅色模式、减少动效、更高对比度
• 设备类：横竖屏、是否支持悬停、主输入是不是触摸
• 打印
• 实时预览（显示的是括号里面那份声明的效果）
• ⚠️ 暗色模式那条说明它不是「现在是暗色」；减少动效那条说明它不会自动停掉动画
• 复制的是完整的 `@media … { }` 块

使用方法

1. 选一个查询条件
2. 宽度类的填断点；区间再填上界
3. 复制右边那段，把选择器与声明改成你自己的

常见问题

为什么 max-width 是 767.98px 而不是 767px？

为了让区间严丝合缝。`max-width: 767px` 与 `min-width: 768px` 之间留下了 `767px ~ 768px` 那一段 —— 两个规则都不命中，于是某些窗口宽度下样式莫名其妙不对。而那一段在现实中是存在的：浏览器缩放到 110%、设备像素比不是整数、或者用了 `clamp()` 算出来的布局，都会产生分数像素的视口宽度。减 0.02 是社区通行的做法（Bootstrap 就是这么做的），它比任何整数都小，又比 767.98 之后的第一个分数大。

`prefers-color-scheme: dark` 为什么没生效？

因为它表示的是「用户表达过偏好暗色」，不是「用户现在是暗色」。用户从没在系统里设置过主题偏好时，这个查询不命中 —— 于是只在 `dark` 里写了样式的页面，在这些人眼里是白底黑字（也就是你的默认样式）。正确的做法是先写浅色的默认样式，再在 `dark` 里覆盖，而不是把深色当默认、把浅色放进 `light`。后一种写法在「未表态」的用户那里会得到一份既不是深色也不是浅色设计过的样式。

`prefers-reduced-motion` 写了之后动画怎么还在动？

因为这个查询本身什么都不做 —— 它只是一个条件，告诉你用户要求减少动效。要真的生效，得在它里面把动画关掉：`animation: none;`、`transition: none;`，或者把时长压到接近零。只写一个空的 `@media (prefers-reduced-motion: reduce) { }` 块等于没写，而它在代码里看着像是处理过了 —— 这是这个特性最常见的误用。

该用 `min-width` 还是 `max-width`？

优先用 `min-width`（移动优先）。理由不是风格，是层叠：`min-width` 的规则写在后面会自然覆盖前面的，加一个新断点只需要往后追加；而 `max-width` 的规则得插在正确的位置，越加越容易乱。而且「先给手机写基础样式、再为大屏加东西」这个顺序逼着你面对「小屏上放不下什么」，比「先做好桌面版再想办法塞进手机」更容易做对。

媒体查询能判断「用户用的是不是触摸设备」吗？

不能可靠地判断，只能问对问题。`(pointer: coarse)` 问的是「主输入设备是不是粗糙的（手指）」，`(hover: hover)` 问的是「能不能悬停」。但混合设备（带触摸屏的笔记本、平板接了鼠标）两个答案可以同时成立，而且用户随时可能切换输入方式。所以别用它来猜设备，用它来给能力做增强：`@media (hover: hover)` 里才写 `:hover` 的样式 —— 那才是它准确的用法，因为在触摸屏上「悬停」这个概念本身就不存在。