跳到主要内容

CSS 媒体查询与响应式断点生成器

CSS @media 查询 + 响应式断点生成器:Tailwind / Bootstrap / Material 预设,移动优先 vs 桌面优先,暗色模式、hover、降低动态、宽高比一站搞定。

  • 本地处理
  • 分类 开发运维
  • 适合 格式化、校验、压缩或检查和代码相关的文本。 
/* base (mobile) — no media query */
:root {
  /* styles for this breakpoint */
}

/* sm and up */
@media (min-width: 640px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* md and up */
@media (min-width: 768px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* lg and up */
@media (min-width: 1024px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* xl and up */
@media (min-width: 1280px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* 2xl and up */
@media (min-width: 1536px) {
  :root {
    /* styles for this breakpoint */
  }
}
px
@media (min-width: 768px) {
  /* your styles here */
}

这个工具能做什么

覆盖媒体查询全谱的生成器,不只是 min-width 一行。先选布局策略 (移动优先 / 桌面优先),再挑一套框架断点预设, 涵盖 Tailwind (sm 640、 md 768、lg 1024、xl 1280、2xl 1536)、Bootstrap 5 (sm 576 到 xxl 1400)、Material 3 (medium 600 到 extra-large 1600),工具直接吐出 一份可粘贴的完整响应式样式骨架:一条 base 规则 + 每个断点一个 @media 块。移动优先按 min-width 从小到大排列,桌面优先按 max-width 从大到小排列。桌面优先的输出会把每个 max-width 减 0.02px,这是处理"视口宽度正好落在断点上、同时命中两条查询"这个 经典 off-by-one 重叠问题的标准做法 (Bootstrap 5 也是这么干的)。 骨架下面还有一个单条查询构造器,把真实项目里要写的都做齐了: 宽度区间 (min..max 一个块)、屏幕方向 orientation、做主题用的 prefers-color-scheme 深色/浅色、做无障碍用的 prefers-reduced-motion、 区分触屏和鼠标的 hover / pointer 能力查询,以及 min-aspect-ratio。 整份输出可以一键在 px 和 em 之间切换。px 是常见默认,但 em 断点会跟着用户浏览器字号缩放,讲究无障碍的项目更偏好 em。所有参数 写进 URL,分享一条链接就能复现整套配置;你选的框架、策略、单位会 本地记住,下次打开默认沿用。100% 浏览器本地运算,你输入的任何东西 都不离开这个标签页。

工具细节

输入
文本 + 数值 + 结构化内容
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
可分享链接状态
关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算
首屏 JS ≤ 10 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
开发运维 · 程序员
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

CSS 媒体查询生成器 适合怎么用

适合穿插在写代码、查问题、做 Review、上线前的小任务里。

适合开发场景

  • 格式化、校验、压缩或检查和代码相关的文本。
  • 把片段整理好再放进文档、工单、提交或交接材料。
  • 不切换工具,快速检查一个小 payload。

开发检查项

  • 压缩、混淆这类不可逆处理,先对副本操作。
  • 除非确认工具本地处理,不要粘贴密钥和敏感片段。
  • 转换后的代码上线前,仍要跑自己的测试或 lint。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 CSS clamp() 流式字号生成器 CSS clamp() 流式字号生成器, 最小/最大字号+视口范围 自动算 clamp 公式, 一键生成完整 h1-h6+body 排版字号表, 复制 CSS / Tailwind。 打开
  2. 2 Tailwind CSS 速查表 Tailwind CSS 速查表,100+ 工具类(间距/颜色/flex/grid/排版/响应式),带实时预览。 打开
  3. 3 Flexbox 可视化 Playground 与 CSS 生成器 Flexbox 实战 Playground:在真实 flex 容器上调每一个容器/子项属性, 直接复制对应 CSS。flex-direction、justify-content、align-items、gap、order、flex-grow/shrink/basis、align-self 全覆盖。100% 浏览器本地。 打开

真实使用场景

  • 几秒钟搭一份移动优先、对齐 Tailwind 的样式骨架

    你在手写 CSS,但想用跟 Tailwind config 一样的断点,免得两边漂移。 选 Tailwind 预设,保持移动优先,复制生成的骨架:一条 base 规则 加上 640、768、1024、1280、1536 处的 min-width 块。把每个断点的 规则填进对应的块。这样你的自定义 CSS 和工具类就在完全相同的点 换行,设计师审布局时,无论组件是用工具类还是手写规则,看到的 reflow 都一致。

  • 不写一行 JavaScript 加上系统暗色模式

    营销页要尊重访客的系统主题,但你不想为此塞一段切主题的脚本。 把单条查询构造器切到 color-scheme,选 dark,把 @media (prefers-color-scheme: dark) 粘进样式表,里面放暗色变量 覆盖 (--bg、--fg、--accent)。大多数手机日落后系统自动切换, 零运行时开销,首屏也不会先闪一下错的主题。

  • 给无障碍的首屏动画接上 reduced-motion

    落地页首屏有视差滚动和自动淡入。无障碍审查指出这会影响前庭功能 障碍的用户。生成 @media (prefers-reduced-motion: reduce),把动画 声明包进去让它在里面退化成静态状态,系统级的"减少动态"开关现在 就能关掉这个效果。一次复制粘贴就关掉一条真实的 WCAG 2.3.3 问题。

  • 针对触屏设备放大点击区域

    鼠标下手感正常的按钮,对拇指来说太小。用 pointer 特性、选 coarse, 得到 @media (pointer: coarse) { ... }。在里面给触屏加大 padding 和 min-height,不影响桌面布局。再配一个 hover 设成 none,把只在 有鼠标时才有意义的悬停元素 (需要鼠标的 tooltip) 在触屏上藏掉。

  • 把老的桌面优先样式表迁成有据可查的断点

    你接手一份满是裸 (max-width: 991px) 查询、毫无说明的样式表。 切到桌面优先,加载 Bootstrap 5 预设,工具会带名字注释地复现 1399.98 / 1199.98 / 991.98 / 767.98 / 575.98 这套 cap 值。现在 你能把老数字对应到有文档的层级,放心重构,而不用猜 991 当初 到底想表达什么。

常见踩坑

  • 在同一份样式表里混用 min-width 和 max-width 策略,会造出死区或被双重命中的区间。一份样式表只选一种策略。本工具的策略开关通过只生成全 min 或全 max 的查询来强制这一点,不会混着来。

  • 把 (max-width: 768px) 和 (min-width: 768px) 写成相邻断点。正好 768px 的视口两条都命中。用这里的桌面优先输出,它把 max 减到 767.98px,每个宽度就只命中一条查询。

  • 在媒体查询里用 em 还指望它跟着你 :root { font-size } 的覆盖走,它不会。媒体查询的 em 永远相对浏览器默认字号,所以不管你 CSS 怎么写,48em 都是 768px。要按组件相对缩放,那是容器查询 (container queries) 的事,不是媒体查询。

隐私说明

每一条媒体查询字符串都是浏览器标签页里跑的纯 JavaScript 拼出来的。 断点数值、框架选择、查询内容,都不上传、不记录、不分析。要知道的 一点:分享 URL 会把你的数值参数 (框架、策略、最小/最大宽度、单位) 写进 query string,这样队友打开链接就落在同一套配置上。这些都是 不敏感的布局数字,分享很安全;断点里没有任何隐私信息。你选的框架、 策略、单位偏好还会存进这个浏览器的 localStorage,工具下次打开就 沿用你上回的设置,这份数据不离开设备,随时能通过浏览器的网站 数据设置清掉。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-06-13