如果任何一个语句都正确，如何执行媒体查询？

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 有 laptop/desktop 版本，一切都很好：

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

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

但后来我注意到在将移动设备更改为横向后，由于媒体查询的宽度小于屏幕横向宽度，它会切换回桌面模式。什么是最好的媒体查询集，我可以在两个不同的查询中执行，只针对移动和其他平台，考虑到 phone 是横向还是纵向？我不想因为 phone 正在横向移动等原因而不得不通过多个媒体查询重复我的 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 */
}

一些提醒：

您的媒体查询不适用于 "portrait and device-width < 768px" 和 "device-width > 1024px" 情况。您也需要以某种方式解决这些情况。
虽然 iPad（在 ladnscape 中）的屏幕宽度为 1024 像素，但您可以将您的网站桌面视图显示给宽度至少为 768 像素的任何其他 phones/tablets。我不认为这是个好主意。但我不知道你的网站是什么样子，所以我假设你知道你在做什么。
顺便说一句：像 bootstrap 这样的网格系统不会为您做很多事情吗？

如果任何一个语句都正确，如何执行媒体查询？

How to perform media queries if either statements are correct?

html

css

mobile

jquery-mobile