如果任一陈述正确，如何执行媒体查询？

Question

我正在寻找如何根据两个语句中的任何一个是否为真来执行 css。例如：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
OR
and (max-device-width : 1024px) 
and (orientation : portrait){

}

我正在制作一个多平台网站并完成了移动版本，但是我希望 iPad 拥有笔记本电脑/台式机版本，这一切都很好：

@media only screen and (min-device-width: 0px){Mobile Version CSS}

@media only screen and (min-device-width: 500px){Other Version CSS}

但后来我注意到在将移动设备更改为横向后，它会切换回桌面模式，因为媒体查询的宽度小于屏幕横向宽度。什么是最好的媒体查询集，我可以在两个不同的查询中执行，仅适用于移动和其他平台，考虑到手机是横向还是纵向？我不想通过多个媒体查询重复我的 CSS 代码，因为手机是横向的等等。我只想让移动版本处于活动状态，无论手机是横向还是纵向。

谢谢

Answer 1

快速的 google 搜索无法向您透露这一切：（第一次尝试）https://css-tricks.com/logic-in-media-queries/

媒体查询逻辑：

• 还有：and
• 或：,
• 不是：not

 
在您的情况下，您的 CSS 看起来像：

@media
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
  only screen and (max-device-width: 1024px) and (orientation: portrait) {
    /* your css here */
}

 
只是一些提醒：

1. 您的媒体查询不适用于“纵向和设备宽度 1024 像素”的情况。您也需要以某种方式解决这些情况。
2. 虽然 iPad（在 ladnscape 中）的屏幕宽度为 1024 像素，但您也可以将您的网站桌面视图呈现给宽度至少为 768 像素的任何其他手机/平板电脑。我不认为这是个好主意。但是我不知道您的网站是什么样的，所以我假设您知道自己在做什么。
3. 顺便说一句：像bootstrap 这样的网格系统不会为您做很多事情吗？