如何编写媒体查询
方向查询
检测屏幕方向
/* 竖屏 (Portrait) */
@media (orientation: portrait) {
.container {
flex-direction: column;
}
}
/* 横屏 (Landscape) */
@media (orientation: landscape) {
.container {
flex-direction: row;
}
}针对特定型号的精确查询
媒体查询中的 max- 和 min- 前缀用于定义条件范围，通常与宽度、高度、分辨率等属性结合使用。
| 参数 | 说明 |
|---|---|
| max-width | 表示当视口（viewport）的宽度小于或等于指定值时，应用对应的样式规则。 |
| min-width | 表示当视口（viewport）的宽度大于或等于指定值时，应用对应的样式规则。 |
| 两者结合 | 你可以将 min-width 和 max-width 组合使用，来定义一个范围。 |
代码片段
/* 针对 iPad Mini 的横屏 */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
body {
background-color: lightgreen;
}
}
/* 针对 iPad Pro 11寸 的横屏 */
@media only screen
and (min-device-width: 1194px)
and (max-device-width: 1194px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
display: none;
}
}
/* 当视口宽度在768像素和1024像素之间（包括768和1024）时应用这些样式 */
@media (min-width: 768px) and (max-width: 1024px) {
}常见设备参数
| 设备型号 | 横屏宽度 | 竖屏宽度 | 像素密度 |
|---|---|---|---|
| iPhone SE | 667 | 375 | – |
| iPhone XR | 896 | 414 | – |
| iPhone 12 Pro | 844 | 390 | – |
| iPhone 14 Pro Max | 932 | 430 | – |
| iPad Mini | 1024 | 768 | 324 dpi |
| iPad 9 10 | 1024 | 768 | 264 dpi |
| iPad Air | 1180 | 820 | 264 dpi |
| iPad Pro | 1366 | 1024 | 264 dpi |
| Surface Pro 7 | 1368 | 912 | – |
重要提示与实践建议
在实际开发中，除了精确匹配特定iPad，下面这些策略可能更实用：
- 采用流式布局思想：与其为每个型号设置断点，不如优先使用百分比%、flex弹性布局和Grid网格布局，让页面本身就能灵活适应。
- 坚持“移动优先”：先为小屏幕（如手机竖屏）编写基础样式，然后使用 min-width 媒体查询逐步适配更大屏幕和横屏布局。这能简化代码并提升性能。
- 使用 max-width 时，通常用于实现移动优先设计中的反向断点（即从大屏幕到小屏幕）。而 min-width 则常用于移动优先设计（从小屏幕到大屏幕）。
- 理解width与device-width：在媒体查询中，使用 width（如 max-width: 768px）通常比 device-width 更推荐，因为它对应的是浏览器视口（viewport）的可用宽度，能更准确地反映用户的浏览环境。
- 在媒体查询中，还可以使用其他属性，如 height、orientation 等，同样可以使用 min- 和 max- 前缀。
- 务必实地测试：由于iPad型号和系统设置多样，代码完成后务必在真实iPad设备或浏览器开发者工具的模拟设备模式下进行测试，确保效果符合预期。
文章目录