媒体查询覆盖我的默认css

Question

我正在学习如何使用媒体查询，我想我到了某个地方，只是我不明白为什么这个查询会覆盖默认的CSS？

 @media screen and (max-width: 735px), screen and (max-height: 415px), screen and (orientation: landscape) {

        #site-header img {
            width: 50%; 
        }
}

它使我的headerimg在我的桌面全视图中也是50％，即使我在媒体查询之前专门将其设置为100％ - 并且要求未得到满足，那么为什么仍然使用该值？

这是最后一个screen and (orientation: landscape)不起作用，如果我删除它，页面看起来在全尺寸桌面上是正常的，它应该在横向移动设备中，但不能在移动肖像中。为什么景观会影响正常的全景和纵向移动设备？

Answer 1

嘿所以你最后的媒体查询只是询问屏幕是否是方向：横向，这意味着屏幕的宽度比屏幕的高度宽。这也适用于桌面。

所以你只需删除最后一个，或者通常我们将其组合起来：screen和（max-width：1024px）和（orientation：landscape）

如果你想要，你可以将每个媒体查询分开以使其更清晰，结合使用这样的逗号有点令人困惑。