移动端适配验收
前端开发交付一个电商活动页，产品经理用真机测完 iPhone 14 和华为 Mate 40 后，发现 iPad mini 横屏下按钮错位。用本工具输入 1024×768 和 820×1180 两个断点，实时预览各宽度下栅格和按钮布局，不用反复切设备，直接定位到媒体查询条件写错，5 分钟修完。
断 点Breakpoint · 维度与阈值
维度 dimension
阈值 width px
上限 max px
名称 label / 缩写
特 性Features · and 组合，可多选
设备库Devices · 点选填入宽度
方 案Set · 多断点集合
构建好一个断点后，点顶栏「＋ 加入方案」把它收进一套响应式方案。可命名、删除，并按移动优先 / 桌面优先排序统一输出。
375px
无命中
Quanbao
Feature
A
B
C
D
E
F
就绪 · 构建断点 / 拖宽看命中 / 实时导出 · 全程浏览器本地处理
第一节
关于本工具
About写响应式 CSS 时，最烦的不是调断点，而是在不同设备间切来切去、反复刷新确认样式有没有崩。这个工具把断点生成、设备库和实时预览合在一处：选 iPhone 15 或 iPad Pro，界面即时渲染对应视口下的效果。所有计算和渲染都在浏览器本地完成，不向服务器发送任何代码或页面内容。
使用场景
响应式框架断点对齐
团队从 Bootstrap 4 迁移到 Tailwind，设计师给了一套 5 档断点（640/768/1024/1280/1536）。前端在写 @media 时总记混 min-width 和 max-width 的边界值，导致 767px 和 768px 之间出现 1px 空白。用本工具输入各断点值，自动生成重叠区间检测，并给出无冲突的媒体查询写法，避免上线后出现“中间态”布局崩坏。
老旧项目样式翻新
接手一个 2018 年的企业官网，原始 CSS 里散落着 20 多处硬编码的 @media (max-width: 480px) 和 (min-width: 769px) 等混杂写法，导致 iPhone SE 和 iPhone 14 显示不一致。用本工具的设备库调出 iPhone SE（375×667）和 iPhone 14（390×844）的精确像素，实时预览两屏下导航栏和轮播图的表现，逐一清理冗余断点，把 20 个条件合并成 5 个标准断点。
印刷品转 H5 适配
某出版社把一本 200 页的图册做成电子版 H5，原设计稿是 1080×1920 固定尺寸，在折叠屏（内屏 7.6 英寸 2208×1840）上半截图片被裁，下半截文字溢出。用本工具输入折叠屏展开态的分辨率，实时预览排版效果，发现图片容器用了固定 px 而非 vw/vh。调整 CSS 为 clamp() 函数后，再切回设备库验证 5 种折叠屏机型，全部正常。
跨团队评审演示
设计、前端、测试三方评审一个后台管理系统的仪表盘，设计师只给了 1920px 宽度的效果图。测试提出在 1366px 笔记本上表格列数不够，前端说“我写个 @media 就行但不知道具体断点”。用本工具输入 1366×768 实时生成预览，发现第三个图表被挤压变形。三方当场敲定：在 1440px 处增加一个中间断点，表格从 6 列降为 4 列，图表改用横向滚动。
第二节
使用指南
Getting Started使用步骤
- 1在「断点」面板输入目标视口宽度（如 768px），右侧预览区同步显示该宽度下的布局效果
- 2从「设备库」下拉列表选择 iPhone 14 / iPad Pro 等机型，断点与预览区自动匹配该设备尺寸
- 3拖动预览区右侧边缘滑块，实时调整视口宽度，断点列表高亮显示当前命中的断点
- 4点击「导出」按钮，复制生成的 @media 查询代码块，可直接粘贴到样式文件中
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 断点：768px, 1024px, 1280px；设备：iPad Air (820×1180) | 768px: 默认样式 → 820px 匹配；1024px: 平板横屏 → 820px 不匹配；1280px: 桌面 → 820px 不匹配；实时预览：iPad Air 竖屏 820px，匹配 768px 断点，背景色变蓝 | 常规：多断点与真实设备结合，验证断点优先级和实时预览联动 |
| 断点：320px；设备：iPhone SE (375×667) | 320px: 默认样式 → 375px 匹配；实时预览：iPhone SE 竖屏 375px，匹配 320px 断点，背景色变绿 | 常规：最小断点与最小设备匹配，验证边界设备兼容性 |
| 断点：0px；设备：任意设备 | 0px: 默认样式 → 所有设备均匹配；实时预览：所有设备背景色均改变 | 边界：断点为 0px 时匹配所有设备，验证工具对零值断点的处理 |
| 断点：9999px；设备：4K 显示器 (3840×2160) | 9999px: 默认样式 → 3840px 不匹配；实时预览：4K 显示器背景色不变 | 边界：超大断点超过所有设备宽度，验证工具对超限值的处理 |
| 断点：768px, 768px；设备：iPad Air (820×1180) | 768px: 默认样式 → 820px 匹配；第二个 768px 被忽略（重复断点）；实时预览：仅触发一次样式变化 | 易错：重复断点输入，工具应去重或提示，避免用户误以为会触发多次 |
| 断点：abc；设备：iPhone 14 (390×844) | 输入无效：'abc' 不是合法像素值；请使用数字+px 格式，如 768px；实时预览：无变化 | 易错：非数字输入，验证工具的输入校验和错误提示 |
| 断点：768px；设备：自定义设备 (宽度: 768px, 高度: 1024px) | 768px: 默认样式 → 768px 匹配（精确相等）；实时预览：自定义设备背景色改变 | 边界：断点与设备宽度精确相等，验证边界条件匹配 |
常见错误对照
1.断点值写成了 px 以外的单位
✗ 错误
@media (min-width: 48em)✓ 修复
@media (min-width: 768px)媒体查询的 min/max-width 只接受绝对长度单位（px、cm、in 等），em/rem 在媒体查询中会基于浏览器默认字体计算，不同浏览器默认字号不同，导致断点不一致。
2.逻辑运算符 and 与括号之间缺少空格
✗ 错误
@media (min-width:768px)and(max-width:1024px)✓ 修复
@media (min-width: 768px) and (max-width: 1024px)CSS 语法要求 and 前后必须有空格，否则整个表达式被解析器视为无效声明，规则不会生效。
3.逗号分隔多个条件时误用 and
✗ 错误
@media (min-width: 768px) and (max-width: 1024px), (min-width: 1200px)✓ 修复
@media (min-width: 768px) and (max-width: 1024px), (min-width: 1200px)逗号表示 OR 逻辑，and 表示 AND 逻辑。上面例子实际是「(768~1024) OR (≥1200)」，若想要「(768~1024) OR (≥1200)」则正确，但若想表达「(768~1024) AND (≥1200)」则永远不成立。
4.在 not 后面直接跟括号，未加空格
✗ 错误
@media not (min-width: 768px)✓ 修复
@media not all and (min-width: 768px)not 关键字必须后跟媒体类型（如 all、screen），不能直接跟括号。规范要求 not 后接空格+媒体类型+空格+and+条件，否则语法错误。
5.同时使用 min-width 和 max-width 时方向写反
✗ 错误
@media (min-width: 1024px) and (max-width: 768px)✓ 修复
@media (min-width: 768px) and (max-width: 1024px)min-width 表示「大于等于」，max-width 表示「小于等于」。若 min 值大于 max 值，则区间为空，永远不会匹配任何视口。
6.把设备像素比写成了 dpr 而非 device-pixel-ratio
✗ 错误
@media (min-resolution: 2dpr)✓ 修复
@media (min-resolution: 2dppx)CSS 中分辨率单位只有 dpi、dpcm、dppx，没有 dpr。dppx 表示每像素点数，2dppx 等价于 2x 屏幕。写 2dpr 会被浏览器忽略。
7.在逗号分隔列表中混用 and 与 or 逻辑导致歧义
✗ 错误
@media (min-width: 768px) and (max-width: 1024px), (orientation: landscape)✓ 修复
@media (min-width: 768px) and (max-width: 1024px), (min-width: 1025px) and (orientation: landscape)逗号分隔的每个部分都是独立 OR 条件。上面例子中，只要横屏（无论宽度）就会匹配，可能覆盖掉预期范围。应明确每个 OR 分支的完整条件。
8.把 hover 特性写成媒体特性而非交互特性
✗ 错误
@media (hover: hover) and (pointer: fine)✓ 修复
@media (hover: hover) and (pointer: fine)hover 和 pointer 是媒体特性（media feature），不是媒体类型，写法正确。常见错误是误写成 @media screen and (hover) 或 @media (hover: true)，应使用关键字值 hover/none/fine/coarse。
第三节
工作原理
How It Works核心公式
min-width = 设备宽度(px), max-width = 设备宽度(px) - 1
变量说明
min-width媒体查询最小宽度，单位 pxmax-width媒体查询最大宽度，单位 px设备宽度目标设备视口宽度，单位 px
示例
iPhone 14 Pro Max 视口宽度 430 px：生成 @media (min-width: 430px) 作为该设备断点；若需覆盖 430px 以下设备，则用 @media (max-width: 429px)。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这个断点生成是怎么用的？我直接输入一个宽度就行吗？＋
答
不是直接输入一个宽度。工具提供两套方式：一是手动输入断点名和对应像素值（如 `sm: 576px`），二是从预设设备库（iPhone、iPad、桌面等）勾选，工具自动生成对应的断点区间。生成后右侧实时预览区会显示各断点下的背景色变化，方便确认覆盖范围。建议先勾设备库看效果，再微调数值。
问设备库里有哪些手机型号？有没有最新的 iPhone 16？＋
答
设备库覆盖主流手机、平板和桌面分辨率，包括 iPhone 全系（至 15 Pro Max）、iPad、Samsung Galaxy、Pixel、小米等常见机型，以及 1366×768、1920×1080 等桌面标准。设备列表会定期更新主流新机型，但具体型号以页面实际显示为准。如果没找到特定设备，可以手动输入宽度，效果一样。
问实时预览怎么用？我改了断点它会不会自动刷新？＋
答
实时预览分左右两栏：左侧是当前选中断点的颜色块，右侧是模拟浏览器视口宽度的容器。改断点值或新增断点后，预览区会立即自动刷新，无需点击任何按钮。鼠标在预览区横向拖动时，顶部会实时显示当前视口宽度和命中的断点名，方便肉眼验证边界值是否准确。
问生成的媒体查询代码是抄过来直接用吗？要不要加什么前缀？＋
答
代码格式为标准 CSS `@media (min-width: Xpx) and (max-width: Ypx)`，不带浏览器前缀，直接粘贴到样式文件或 `<style>` 标签内即可使用。注意：如果项目用了 PostCSS 或 Autoprefixer，它不会处理媒体查询本身，但里面的属性会正常转换。建议复制前确认断点区间不重叠，否则后写的规则会覆盖前面的。
问为什么我设了三个断点，预览里只有两个颜色在变？＋
答
最常见原因是断点区间有重叠或间隙。例如设了 `sm: 0-576`、`md: 576-768`，`576px` 这个值同时匹配 sm 和 md，预览只会显示后命中的那个。工具不会自动去重，需要手动调整边界值（比如让 md 从 577px 开始）。另一个可能是断点排序问题——CSS 中后定义的相同优先级规则会覆盖前面的。
问这个工具是纯前端跑的？我的设备信息会不会上传到服务器？＋
答
完全纯前端，所有断点计算、设备库匹配、代码生成都在浏览器本地完成，不会上传任何数据到服务器。断点值、设备选择、预览渲染全在内存里，刷新页面即消失。适合处理保密项目或离线环境使用。注意：如果页面加载了外部字体或图片（如设备图标），那些资源会走 CDN，但你的数据本身不会外传。
问跟那些自动生成响应式代码的工具比，这个有什么不一样？＋
答
多数自动生成工具是输入设计稿尺寸，输出完整 CSS 框架代码（如 Tailwind 配置），偏「从设计到代码」。这个工具聚焦「从断点到查询语句」——你已经有设计稿或设备列表，需要快速生成标准的 `@media` 规则片段，而不是整套 UI 框架。它更适合前端开发者做微调、查边界、验证断点覆盖度，而非设计转码。
问我复制出来的代码在 Chrome 里正常，Safari 里样式乱了，是工具的问题吗？＋
答
大概率不是工具生成的代码问题。`@media` 查询本身在所有现代浏览器兼容性一致。先检查两点：一是 Safari 是否开启了「在菜单栏中显示「开发」菜单」？部分旧版 Safari 对 `min-width` 和 `max-width` 解析有 bug，升级到 15+ 即可。二是确认项目 CSS 里没有其他 `!important` 或更高优先级选择器覆盖了媒体查询内的规则。
问能不能批量生成多个设备的断点？比如一次把 iPhone、iPad、桌面都列出来？＋
答
可以。在设备库中勾选多个设备后，工具会一次性列出所有选中设备的分辨率，并自动生成对应的 `@media` 断点代码块，每个设备一行。如果多个设备分辨率相同（如 iPhone 14 Pro 和 15 Pro 都是 390×844），工具会去重只生成一个断点。生成的代码按宽度从小到大排列，方便直接拷贝到项目中。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。