CSS媒体查询生成器
从断点预设（或自定义宽度）和条件类型生成CSS @media查询块——将您的CSS规则包装在即用型响应式块中。
输入
粘贴要在@media块中包装的CSS规则——保持为占位符注释以获得空的@media外壳。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-media-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"breakpointPreset": "tablet",
"customWidth": "320",
"conditionType": "min-width",
"cssContent": "color: red;"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-media-query-generator` tool (CSS Media Query Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-media-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS媒体查询生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能
CSS媒体查询生成器从断点宽度和条件类型生成即用型@media (...) { }块。选择常见设备预设（或设置自定义像素宽度），选择查询应在该宽度上方还是下方应用——或切换到方向检查——然后粘贴您想要包装的CSS规则。当您更改任何选项时，该工具会即时更新输出。
什么是CSS媒体查询
媒体查询让样式表根据视口宽度、高度、方向或其他特性应用不同的规则。基本形式是：
@media (min-width: 768px) {
/* 仅在768px及更宽处适用的规则 */
}媒体查询是响应式设计的基础：您编写基础布局，然后在视口超过断点时覆盖特定属性，而不是交付一个固定布局。
常见断点
没有单一的官方断点比例——不同的框架（Bootstrap、Tailwind、Material Design）各自定义自己的——但广泛使用的通用比例看起来像这样：
- 移动设备 — 480px（小型手机及以上）
- 平板电脑 — 768px（平板电脑和小型笔记本电脑）
- 笔记本电脑 — 1024px（笔记本电脑和小型桌面显示器）
- 桌面设备 — 1280px（标准桌面显示器及以上）
如果您的项目使用不同的比例，请选择"自定义"。
如何使用
- 选择断点预设（移动设备、平板电脑、笔记本电脑、桌面设备），或选择自定义并输入您自己的像素宽度。
- 选择条件类型：
- 最小宽度 — 移动优先，在断点及更宽处适用。
- 最大宽度 — 桌面优先，在断点及更窄处适用。
- 方向：竖向/横向 — 根据视口的方向而不是其宽度应用（这些忽略断点）。
- 将要包装的CSS规则粘贴到要包装的CSS中——如果只需要空的
@media外壳，可保留为占位符注释。 - 从输出复制或下载生成的块，并将其粘贴到您的样式表中。
常见问题
最小宽度和最大宽度有什么区别？
min-width是"移动优先"：您为小屏幕编写基础样式，然后添加在屏幕至少为断点宽度时启动的覆盖。max-width是"桌面优先"：覆盖在屏幕最多为断点宽度时应用——这是移动优先成为常见做法之前更传统的方法。
我可以为范围组合最小宽度和最大宽度吗？
此工具一次生成一个条件。对于范围（例如"仅在768px到1023px之间"），在1023px处生成最大宽度版本，在768px处生成最小宽度版本，然后使用and手动组合：
@media (min-width: 768px) and (max-width: 1023px) { ... }
为什么我选择方向时断点字段不执行任何操作？ 方向查询响应视口的宽高比而不是其宽度，因此断点值不是生成条件的一部分——只有竖向/横向选择重要。
此工具是否存储或上传任何内容？ 否。所有内容都在您的浏览器中本地运行——您粘贴的CSS永远不会离开您的设备。