css - 复杂的媒体查询

Question

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

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

• 我想为所有方向宽度或高度小于 640 像素的设备使用 small.css
• 我想对宽度和高度大于 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

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

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

设备为竖屏且宽度小于 640px

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