媒体查询常用参数

常见媒体查询

因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。

如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { ... }

如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { ... }

如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { ... }

如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { ... }

您可能已经注意到了，iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持orientation 媒体特性。您必须使用 width 模拟这些方向断点。请参阅 参考资料，获取有关常见媒体特性的更多信息。