复杂媒体查询答案

【问题标题】：Complex Media Query复杂媒体查询
【发布时间】：2013-04-19 00:49:55
【问题描述】：

一如既往，感谢您的帮助。

我正在尝试编写一个复杂的媒体查询，想知道是否有人可以提供帮助。

我想对所有在任一方向上宽度或高度都小于 640 像素的设备使用 small.css
我想为所有宽度和高度大于 640 像素的设备使用 large.css

这就是让我着迷的部分 - 我想打破上面的规则并使用

large.css 如果设备是横向且宽度大于 639px
如果设备是纵向且宽度小于 640 像素，则为 small.css

这是我现在拥有的

  "only screen and (min-device-width:320px) and (max-device-width:639px)" 
  "only screen and (min-device-height:320px) and (max-device-width:639px)"
  "only screen and (min-device-width:640px)"

任何帮助将不胜感激！

谢谢

丰富

【问题讨论】：

标签： css mobile orientation media-queries

【解决方案1】：

设备是横向的，宽度大于 639px

<link rel="stylesheet" media="screen and (orientation:landscape) and (min-device-width: 639px" href="large.css" />

设备为纵向，宽度小于 640 像素

<link rel="stylesheet" media="screen and (orientation:portrait) and (max-device-width: 640px" href="small.css" />

【讨论】：

【解决方案2】：

首先，(min|max)-device-width 无济于事，因为这是设备的宽度，而不是视口/浏览器窗口的像素宽度。然而，这个问题在手机/平板电脑上有所减少，因为浏览器几乎总是设备的全宽/全高。

此外，同时使用宽度/高度选项可能会导致一些冲突，尤其是在与设备方向一起使用时，因此按方向拆分所有查询可能会有所帮助。

这些应该给你一个起点：

 // small.css
    media="only screen and (max-width:639px) and (orientation: portrait)"

 // large.css  
    media="only screen and (min-width:640px) and (orientation: landscape)"

由于设备/操作系统制造商的混合支持，媒体查询并不是一门精确的科学。如果您环顾网络，您会发现开发人员正在努力满足各种设备的需求。

值得查看以下内容以查找示例和可能的情况以及如何组合查询以更好地适应单个设备或更广泛的范围：

【讨论】：