基于窗口宽度和高度的媒体查询

Question

我正在尝试了解媒体查询的工作原理。

我有两个窗口，一个是1280X700，另一个是1280X800。

我需要为两种不同的尺寸创建两个单独的媒体查询。

我尝试了以下操作，但它不起作用。

@media (min-width:1280px) and  (min-height:700px){
    div#page-content{    
               margin-top: 7%;

        .chef{
            max-width: 70% !important;
        }
   }
}  

@media (min-width:1280px) and  (min-height:800px){
    div#page-content{    
               margin-top: 7%;

        .chef{
            max-width: 100% !important;
        }
   }
}  

感谢您的帮助

Answer 1

然后你应该尝试两个屏幕之间的中间。总是添加几个像素，因为人们可以调整屏幕大小，工具栏占用空间等等。总是留下一点摆动空间，因为您使用的精度意味着浏览器在看起来不对之前无法从您那里偷取像素！ / p>

试试这个：

@media (min-width:1250px) and  (max-height:750px){
    // screen size for 1280x700 or (larger than 1250)x(smaller than 750)
}  

@media (min-width:1250px) and  (min-height:751px){
    // screen size for 1280x800 or (larger than 1250)x(larger than 751)
}