css3 - 为什么我不能根据分辨率设置保证金？

Question

我下面有CSS。我的屏幕分辨率是1280x800。为什么我的班级.landslide没有获得保证金价值10%？现在它总是得到18%？甚至我的屏幕分辨率是1280x800，应该匹配最大高度：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;
  }
}