Css 复杂媒体查询

一如既往，谢谢你的帮助

我正试图写一个复杂的媒体查询，想知道是否有人可以帮忙

• 我想对任何方向上宽度或高度小于640px的所有设备使用small.css
• 我想对宽度和高度大于640px的所有设备使用large.css

这就是让我着迷的部分——我想打破上面的规则，使用它

• 如果设备为横向且宽度大于639px，则为large.css
• 如果设备为纵向且宽度小于640px，则为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)"

任何帮助都将不胜感激

谢谢

---

Rich

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

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

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

设备为纵向，宽度小于640px

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

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

首先，

（最小|最大）-设备宽度

没有帮助，因为这是设备的宽度，而不是视口/浏览器窗口的像素宽度。然而，这一问题在手机/平板电脑上有所减少，因为浏览器几乎总是设备的全宽/全高

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

这些应该为您提供一个起点：

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

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

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

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