工具介绍
CSS媒体查询生成器是一个快速生成响应式设计@media代码的工具，支持选择断点宽度、屏幕方向、像素比等条件，满足不同响应式布局开发需求。
使用方法
- 选择查询条件：
min-width是移动优先写法（大于等于断点生效），max-width是PC优先写法（小于等于断点生效） - 输入断点宽度（单位像素），或点击预设按钮快速选择常用断点
- 根据需要勾选额外条件，比如屏幕方向、视网膜屏适配
- 生成的代码会自动显示在结果框，点击「复制代码」可快速复制使用
相关概念
- 移动优先：从移动端开始设计，使用min-width，随着屏幕变大逐步添加样式，是现在主流的响应式设计思路
- PC优先：从桌面端开始设计，使用max-width，随着屏幕变小逐步调整样式，适合传统网站改造
- 断点：就是媒体查询触发样式变化的临界点，单位为像素px，常见断点参考底部表格
- 视网膜屏：添加device-pixel-ratio条件适配高清屏幕，通常2倍及以上屏幕会认为是视网膜屏
注意事项
- 本工具生成的是标准CSS媒体查询语法，兼容所有现代浏览器
- 同时勾选竖屏和横屏不会生成任何方向条件，只需要勾选其中一个或不勾选
- 实际开发中，请将/* 在这里编写你的样式 */替换为你需要在当前断点生效的CSS代码