如何使对1024 x 600和1024 x 768的媒体查询分别工作？

Question

我正在使用chrome的开发工具以不同的分辨率测试网站。

我对1024 x 600和1024 x 768有单独的媒体查询，但是出于某种原因，1024 x 768用于1024 x600。如果删除1024 x 768，则它将使用1024 x 600。 / p>

这是我用于媒体查询的代码：

@media all and  (max-width:1024px),(max-height: 768px)
{
} 
@media all and  (max-width:1024px),(max-height: 600px)
{
} 

Answer 1

您可以通过将复杂的媒体查询与“和”组合来创建。 要将样式限制为带有屏幕的设备，可以将媒体功能链接到屏幕媒体类型：

（关于您的问题：）

@media screen and (max-width: 1024px) and (max-height: 768px) {  }  
@media screen and (max-width: 1024px) and (max-height: 600px) {  }

了解@media here和祝您好运！