0

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

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

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

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

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

任何帮助将不胜感激！

谢谢

富有的

4

2 回答 2

0

首先，(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)"

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

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

于 2013-04-18T16:49:55.763 回答
0

设备是横向的，宽度大于 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" />
于 2013-04-18T16:36:45.090 回答