Question

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

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

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

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

{{1}}

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

谢谢

Answer 1

这不是一个快速的谷歌搜索无法透露给你:(第一次尝试）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 */
}

只是一些提醒：

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

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

1 个答案: