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

debugcn 发表于 Dev

我正在寻找基于两个语句中的任何一个是否为真来执行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代码。我只是希望无论手机是横向还是纵向，都可以使用移动版本。

谢谢

精工85

没什么是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 */
}

只是一些提醒：

您的媒体查询不适用于“纵向和设备宽度<768px”和“设备宽度> 1024px”的情况。您需要以某种方式解决这些情况。
当iPad（在ladnscape中）的屏幕宽度为1024px时，您也可以将网站桌面视图呈现给宽度至少为768px的任何其他电话/平板电脑。我认为这不是一个好主意。但是我不知道您的网站是什么样子，所以我假设您知道您在做什么。
顺便说一句：难道像bootstrap这样的网格系统对您有好处吗？