相同宽度不同高度的媒体查询

Question

对相同宽度和不同高度应用媒体查询的最佳方式？

例如我有这个示例代码

    @media screen and (max-width: 1366px), screen and (max-height: 657px){
        article#chapterthankyou{
        width:984px;
        }

    }

和

@media screen and (max-width: 1366px), screen and (max-height: 768px){

         article#chapterthankyou{
        width:1048px;
        }

    }   

问题是，即使在1366 X 657 上应用了article#chapterthankyou{ width:984px; } 样式。

如何准确应用高度宽度条件？谢谢

Answer 1

你很接近，但根据 MDN 上的this article，你的逻辑运算符有点偏离。

对于您的代码，请尝试使用：

@media screen 
and (max-width: 1366px)
and (max-height: 657px){

        article#chapterthankyou{
        width:984px;

        }
    }

还有……

@media screen 
and (max-width: 1366px)
and (max-height: 768px){

        article#chapterthankyou{
        width:1048px;

        }
    } 

如果这仍然不起作用，请参考 here 获取不同媒体查询的列表，您可能会觉得这很有用。