Question

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

我试图写一个复杂的媒体查询，并想知道那里有人可以提供帮助。

我想将small.css用于宽度或高度均小于640px的所有设备
我想对所有宽度和高度都大于640像素的设备使用large.css

以下是给我的部分 - 我想违反上述规则并使用

large.css如果设备是横向的并且宽度大于639px
small.css如果设备是纵向的并且宽度小于640px

这就是我现在所拥有的

  "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)"

非常感谢任何帮助！

由于

富

Answer 1

该设备是横向设备，宽度大于639像素

<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" />

Answer 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)"

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

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

复杂媒体查询

2 个答案: