视口媒体查询生成器
为响应式网页设计生成 CSS 媒体查询。
媒体查询设置
配置媒体查询条件
条件 1
预设
选择常用的媒体查询模式
生成的 CSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}常用断点
移动设备：
max-width: 480px平板电脑：
481px - 768px桌面：
min-width: 1024px大型桌面：
min-width: 1200px媒体查询指南
主要媒体特性
- • width/height：视口宽度/高度
- • min-width/max-width：最小/最大宽度条件
- • orientation：屏幕方向（纵向/横向）
- • resolution：屏幕分辨率（视网膜显示屏等）
- • hover：悬停功能支持
- • pointer：指针精度（触摸/鼠标）
使用技巧
- • 移动优先方法：使用 min-width 从小屏幕开始设计
- • 使用逻辑运算符组合复杂条件
- • 使用打印媒体类型进行单独的打印样式
- • 使用分辨率支持高分辨率显示