CSS 媒体查询生成器

选择媒体特性(min-width、max-width、min-height、max-height、orientation)并填写取值与内部规则,工具会生成对应的 @media 代码块。全部在浏览器本地完成。

媒体查询设置 等待输入

取值填写 768px 或 landscape;内部规则为要应用的 CSS。

计算结果
特性—
取值—
设置参数后点击生成,@media 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • @media 按设备特征应用不同样式,是响应式布局的基础。
  • min-width 常用于移动优先(从小到大)的断点写法。
  • orientation 的取值为 portrait 或 landscape。
  • 多个条件可用 and 组合,逗号表示「或」。
  • 断点取值应与设计稿保持一致,避免零散断点。