UTILS.
100% 浏览器内运行
@

CSS 媒体查询构建器

用预设构建响应式 @media 查询并复制。

关于此工具

通过选择 min-width、max-width 或范围以及方向来组合响应式 @media 查询,并支持一键设备预设,然后复制外层包裹规则。一切都在你的浏览器中运行。

常见问题

min-width 和 max-width 有什么区别?
min-width 在该宽度及以上应用样式(移动优先),而 max-width 在该宽度及以下应用样式。
设备预设是如何工作的?
每个预设都会填入典型的断点——手机最大到 767px、平板 768–1023px、桌面从 1024px 起——之后你可以再进行微调。

更多工具