媒体查询生成
可视化定义断点（min-width / max-width / 区间 / 朝向 / 分辨率 / 悬停 / 动效偏好），一次生成移动优先与桌面优先两套 @media 规则，外加断点变量表与 @custom-media 别名。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
断点设置
断点名只能用小写字母、数字和连字符（会拼进 CSS 变量名）。起始宽度是移动优先的 min-width；上界留空时，桌面优先自动取「起始宽度 − 0.02px」，两种写法不会重叠。
附加条件
附加条件会用 and 拼在每个断点查询后面，例如 (min-width: 768px) and (hover: hover)。
断点标尺
结果
| 名称 | 起始宽度 | 上界 | 移动优先 | 桌面优先 |
|---|---|---|---|---|
| sm | 640px | — | (min-width: 640px) | (max-width: 639.98px) |
| md | 768px | — | (min-width: 768px) | (max-width: 767.98px) |
| lg | 1024px | — | (min-width: 1024px) | (max-width: 1023.98px) |
| xl | 1280px | — | (min-width: 1280px) | (max-width: 1279.98px) |
/* sm: ≥640px */
@media (min-width: 640px) {
/* your styles */
}
/* md: ≥768px */
@media (min-width: 768px) {
/* your styles */
}
/* lg: ≥1024px */
@media (min-width: 1024px) {
/* your styles */
}
/* xl: ≥1280px */
@media (min-width: 1280px) {
/* your styles */
}/* sm: ≤639.98px */
@media (max-width: 639.98px) {
/* your styles */
}
/* md: ≤767.98px */
@media (max-width: 767.98px) {
/* your styles */
}
/* lg: ≤1023.98px */
@media (max-width: 1023.98px) {
/* your styles */
}
/* xl: ≤1279.98px */
@media (max-width: 1279.98px) {
/* your styles */
}:root {
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}@custom-media --sm (min-width: 640px); @custom-media --md (min-width: 768px); @custom-media --lg (min-width: 1024px); @custom-media --xl (min-width: 1280px);
这个工具能做什么
- 搭响应式布局时先把断点定下来：填好名称与宽度，直接拿到移动优先与桌面优先两套 @media 骨架，不用再手写像素。
- 把设计稿上的断点（例如 640 / 768 / 1024 / 1280）统一成命名断点，并顺手生成 --breakpoint-* 变量，团队里谁的媒体查询都对得上。
- 需要「暗色模式」「减少动效」「触屏设备」这类非宽度条件时，把它们挂到每个断点上，一次生成带 prefers-color-scheme、hover、prefers-reduced-motion 的完整查询。
- 改造老项目时对照断点一览表检查区间有没有空隙或重叠，尤其是桌面优先写法里的 767.98px 这类边界。
示例
输入
断点：sm = 640px、md = 768px（都只填起始宽度），附加条件：不限
输出
移动优先：@media (min-width: 640px) 与 @media (min-width: 768px)；桌面优先：@media (max-width: 639.98px) 与 @media (max-width: 767.98px)；变量表：--breakpoint-sm: 640px; --breakpoint-md: 768px;
桌面优先的上界取「起始宽度 − 0.02px」，这样 640px 宽的屏幕只会命中移动优先那一条。
常见问题
移动优先和桌面优先该选哪个？
新项目优先用移动优先（min-width）：基础样式写窄屏，再逐级用 min-width 增强，规则少、覆盖关系清晰。桌面优先（max-width）适合已有桌面版页面再补移动端。两种写法都生成在这里了，按项目习惯挑一套即可。
为什么桌面优先的上界是 767.98px 而不是 768px？
媒体查询里 min-width: 768px 和 max-width: 768px 会在宽度正好 768px 时同时命中，样式顺序就变得关键、很容易踩坑。减掉 0.02px 后两个区间互不相交，这也是 Bootstrap 等框架的通行做法。
区间断点怎么写？
给同一个断点同时填起始宽度与上界，例如 600 / 899：移动优先输出 (min-width: 600px)，桌面优先输出 (max-width: 899px)。只填上界、不填起始宽度时，两种写法都输出 (max-width: …)，适合「小屏专属」的样式。
断点名有什么限制？
只能用小写字母、数字和连字符，并且以字母开头，因为名字会直接拼进 --breakpoint-md 这类变量名和注释里。写成 MD 或 2xl 会提示错误，改成 md、2xl-print 这类合法名字即可。
@custom-media 能直接用吗？
它是 Media Queries Level 5 的草案语法，浏览器还不支持，需要 PostCSS 的 postcss-custom-media 之类的插件在构建时展开成静态查询。如果项目没有这一步，就把 @media 那两块代码直接复制走。
关键词：media querymedia query generatorresponsive breakpointsmin-widthmax-widthprefers-reduced-motion媒体查询断点响应式布局移动优先桌面优先CSS 变量