媒体查询

标签：css3媒体查询

媒体查询规则：

@media all{}将样式应用于所有类型，

@media(min-width:800px){}将样式应用于最小宽度为800的

@media(min-width:800px) and (max-width:1200px) and (orientation:potrait){}宽度为800-1200且方向是纵向（and 表示同时满足时才会显示，or只要满足其中一个条件即可）

@media(not min-width:800px){}

orientation 媒体查询

@media (orientation:portrait) { ... }

高度和宽度行为十分相似，都支持以 min- 和 max- 为前缀。清单 9 展示了一个有效的媒体查询。

高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

如果没有 min- 或 max- 前缀，您还可以使用 width 和 height 媒体特性，如清单 10 所示。

不带 min- 和 max- 前缀

@media (width:800px) and (height:400px) { ... }

当屏幕正好是 800 像素宽、400 像素高时，可以使用清单 10 中的媒体查询。现实中，像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下，响应式设计会使用范围来执行屏幕检测。

作为媒体查询大小范围的后续内容，下一节将讨论一些常见的媒体查询，在设计一个响应式网站时，您可能会发现它们非常有用。

常见媒体查询

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

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

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

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

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

嵌套的媒体查询

#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

编译结果

#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

媒体查询

标签：css3媒体查询

原文地址：http://warmdoll.blog.51cto.com/10881334/1736957