html - css3 - 为什么我不能根据分辨率设置边距？

Question

我在下面有 CSS。我的屏幕分辨率是 1280x800。为什么我的类 .landslide 没有获得 margin 值 10%？现在总是 18%？即使我的屏幕分辨率是 1280x800，也应该与 max-height:800px 相匹配。

我做错了什么？

@media (max-width: 1380px), (max-height: 800px) {
  .contact .landslide {
    margin: 10% auto 0;
  }
}

@media (max-width: 1380px), (max-height: 1024px) {
  .contact .landslide {
    margin: 18% auto 0;
  }
}

Answer 1

反转规则，否则第二个总是覆盖第一个:

@media screen and (max-width: 1380px) and (max-height: 1024px) {
  .contact .landslide {
    margin: 18% auto 0;
  }
}
@media screen and (max-width: 1380px) and (max-height: 800px) {
  .contact .landslide {
    margin: 10% auto 0;
  }
}