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

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以获取您可能会觉得有用的不同媒体查询的列表。