媒体查询断点生成器
勾选目标设备组合，一键生成 移动端优先（min-width）或桌面优先（max-width）的 media query 代码块，可切换 CSS / SCSS / Tailwind 输出格式；顶部标尺实时预览断点分布，支持自定义断点与数值校验。
1选择断点
策略：
单位：
2生成结果
/* 勾选断点后自动生成 */
常见设备逻辑分辨率对照
| 设备 | 逻辑分辨率（竖屏） | 横屏 | 建议断点归属 |
|---|---|---|---|
| iPhone SE / 小手机 | 375 × 667 | 667 × 375 | 基准（< sm） |
| iPhone 15 / 主流手机 | 393 × 852 | 852 × 393 | 基准（< sm） |
| Android 大屏手机 | 412 × 915 | 915 × 412 | 基准 ~ sm |
| iPad（第 10 代）竖屏 | 820 × 1180 | 1180 × 820 | md ~ lg |
| iPad Pro 11″ 竖屏 | 834 × 1194 | 1194 × 834 | md ~ lg |
| iPad 经典款（9.7″） | 768 × 1024 | 1024 × 768 | md（竖）/ lg（横） |
| Surface Pro | 912 × 1368 | 1368 × 912 | md ~ lg |
| 常见笔记本 | 1280 × 800 / 1440 × 900 | — | xl |
| 桌面显示器 | 1920 × 1080 | — | 2xl ~ 3xl |
| 4K 显示器（浏览器窗口） | 1920 ~ 2560（缩放后） | — | 3xl ~ 4xl |
框架官方断点预设与覆盖区间图
8 套主流框架的官方断点一键载入（会覆盖当前勾选）；下方 SVG 覆盖带按视口宽度切分，显示每一档断点实际生效的区间。
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！