媒体查询

媒体查询

清单 1. 使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
清单 2. 媒体查询规则
1
@media all and (min-width: 800px) { ... }
清单 3. 简写语法
1
@media (min-width:800px) { ... }
清单 4. 复杂表达式
1
@media (min-width:800px) and (max-width:1200px) { ... }
清单 5. and 条件
1
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
清单 6. or 关键词
1
@media (min-width:800px) or (orientation:portrait) { ... }
清单 7. 使用 not
1
@media (not min-width:800px) { ... }
清单 8. orientation 媒体查询
1
@media (orientation:portrait) { ... }
清单 9. 高度和宽度媒体查询
1
@media (min-width:800px) and (min-height:400px) { ... }

常见媒体查询
因为 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 模拟这些方向断点。