CSS 媒体查询生成器本地处理 · 0 次网络请求

生成 CSS @media 媒体查询：常用断点（sm/md/lg/xl）、暗色模式（prefers-color-scheme）、Retina 高清屏、横竖屏、触屏/鼠标检测，支持 Tailwind 和 Bootstrap 断点预设。

预置 min-width (px) max-width (px) 方向颜色模式 CSS body

@media 输出

等待输入

CSS 媒体查询是什么？

@media 是 CSS 的条件规则，根据设备特性（宽度、高度、方向、颜色模式等）应用不同样式。响应式设计的核心。

常用查询类型：

width / height：视口宽度高度（最常用）
orientation：横竖屏
prefers-color-scheme：暗色/亮色模式
prefers-reduced-motion：用户开启减少动效
hover：是否支持悬停（区分鼠标/触屏）
min-resolution：屏幕像素密度（Retina）

页面更新：2026-10-13 · 本地处理与使用边界