配置orientation:landscape的媒体查询忽略max-width规则问题

CSS媒体查询中逗号是*逻辑或（OR）*运算符：逗号分隔的多个条件只要任意一个命中，整个媒体查询块的样式就会生效，并非“所有条件同时满足才生效”的逻辑与关系。
你写的两段媒体查询都把screen and (orientation: landscape)作为独立的或分支，等于给两个规则都加了“只要是横屏就无条件生效”的触发条件。此时不管视口宽度是多少，只要设备切到横屏，两段规则都会同时命中。由于CSS后写入的同权重样式会覆盖先写入的样式，第二段规则里的top: 65px就会在横屏时全局生效，哪怕视口宽度设为890px也会被意外应用。

另外你当前设置的两个宽度断点（≤667px、≥844px）之间存在668px-843px的规则空隙，这个宽度区间下.search-wrapper的top值会回退到非媒体查询定义的默认样式，如果业务需要全宽度覆盖需要补充对应区间的规则。

根据实际业务场景二选一即可：

• 仅需要横屏状态下按宽度断点适配
  把同规则下需要同时满足的横屏判断、宽度判断用and连接，去掉错误的或逻辑拆分：

/* 横屏且视口宽度≥844px */
@media screen and (orientation: landscape) and (min-width: 844px) { 
    .search-wrapper {
        top: 150px;
    }
}

/* 横屏且视口宽度≤667px */
@media screen and (orientation: landscape) and (max-width: 667px) { 
    .search-wrapper {
        top: 65px;
    }
}

• 不区分横竖屏，仅按视口实际宽度适配
  横竖屏切换时浏览器会自动互换视口的宽高值，宽度断点本身就可以自动适配横竖屏场景，不需要额外添加orientation判断，代码可以直接简化为：

@media (min-width: 844px) { 
    .search-wrapper {
        top: 150px;
    }
}

@media (max-width: 667px) { 
    .search-wrapper {
        top: 65px;
    }
}

内容的提问来源于stack exchange，提问作者Jeremy