媒体查询生成器：响应式 CSS 断点工具
媒体查询生成器可根据 min-width、max-width、min-height、max-height、orientation 等条件创建 CSS @media 块。用 and 组合多个条件，选择 Tailwind 断点预设，并添加您的 CSS 主体。工具会将结果格式化为带缩进的 @media 块，可直接复制到样式表中。
媒体查询生成器是一款基于浏览器的工具，用于创建 CSS @media 块。通过选择 min-width、max-width、min-height、max-height、orientation 等条件，即可将响应式布局需求转换为格式规范的媒体查询。当您想要一个可直接复制的响应式 CSS 起点时，它非常实用。
从一个或多个条件构建查询，条件之间用 and 连接。您也可以选择一键式 Tailwind 断点预设，并提供放入块内的 CSS 主体。生成的结果带有规范的缩进，便于阅读和粘贴到样式表中。该工具根据您的选择创建 @media 块，无需手动格式化输出。
CSS 媒体查询让样式在指定条件下生效，而块内的 CSS 规则定义了具体变化。当需要将布局适配不同宽度、高度或方向，或需要以 Tailwind 断点为起点时，生成媒体查询很有帮助。最终得到一个可在项目中审阅和使用的 CSS 代码块。
媒体查询生成器完全在浏览器中运行，输入在您的设备上处理而非发送到服务器。它免费且私密，页面加载后可继续离线工作，无需服务器连接。开发者和 DevOps 工程师可以用它创建响应式 CSS 片段，用于实现、测试和文档编写。
步骤 1：选择所需的媒体条件，如 min-width、max-width、min-height、max-height 或 orientation。一个查询中可组合多个条件。
步骤 2：如果想从预设断点开始，可以使用一键式 Tailwind 断点预设。
步骤 3：添加应出现在 @media 块内部的 CSS 主体。
步骤 4：生成查询，得到格式规范、带缩进的 CSS @media 块。
步骤 5：复制生成的值，将其添加到样式表或其他项目文件中。
使用场景：为特定视口宽度创建响应式 CSS：添加 min-width 或 max-width 条件及应应用的样式。
使用场景：当布局变化只应应用于特定屏幕形状和尺寸时，组合宽度和方向条件。
使用场景：为熟悉的响应式断点编写 CSS 时，以 Tailwind 断点预设为起点。
使用场景：通过生成包含待测样式的格式化 @media 块，为布局测试准备 CSS 片段。
使用场景：向项目文档或代码评审中添加媒体查询示例，无需手动格式化代码块。
使用场景：为不同条件分别生成 @media 块，逐步构建响应式样式表。