css - 复杂的媒体查询

标签 css mobile orientation media-queries

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

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

  • 我想为所有方向宽度或高度小于 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)"

如有任何帮助,我们将不胜感激!

谢谢

丰富

最佳答案

设备是横向的,宽度大于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" />

关于css - 复杂的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16088009/

相关文章:

mobile - 移动浏览器的工具提示

authentication - 移动应用程序 : how do I provide client authentication

c++ - 面向对象的 C++ 帮助?出于某种原因,对象变量的输出返回数值数组位置而不是实际值。

html - 更改 JSF 表单的背景颜色

iphone - 使站点在 iPhone 上对称对齐

android - 检查手机方向是否在不改变布局的情况下改变

android - 保存以编程方式添加的方向更改 View ?

javascript - 根据 jQuery 中的文本框值 onload 更改 CSS 样式?

html - 如何配置 Spotify 嵌入式播放列表?

html - 背景图像 : always cover whole page