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

Question

我在找出如何根据两个语句中的任何一个是否为true来执行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

这是什么一个快速谷歌搜索可能不会透露给你：（第一次尝试）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. 您的媒体查询不服务情况“肖像和设备宽度< 768px”和“设备e-width> 1024px“。你也需要以某种方式解决这些情况。
2. 虽然一个iPad（在ladnscape）具有1,024像素的屏幕宽度，你会提出你的网站的桌面视图，以具有至少768px宽任何其他手机/平板电脑，太。我不认为这是个好主意。但我不知道你的网站是什么样的，所以我假设你知道你在做什么。
3. BTW：难道网格系统，如bootstrap做了很多适合你？