Question

我不完全确定这应该如何在桌面上运行，但我很确定当你调整浏览器大小时，方向应该改变（假设高度大于宽度，并且在调整大小之后反之亦然）。

所以说，我不知道为什么下面的代码只对pageload有效。

@media all and (orientation: portrait) {
  .slider-slide {
    background-size: auto 100% !important;
  }
}
@media all and (orientation: landscape) {
  .slider-slide {
    background-size: 100% auto !important;
  }
}

基本上我希望这段代码可以根据方向调整背景图片的大小。如果我在页面加载时正确调整了页面大小，两者都有效，但是当我动态调整窗口时，它不起作用。有什么想法吗？

Answer 1

Fabrizio Calderan solution对于给定的用例是最好的，但如果您需要检测纵向和横向的更改，原始问题的答案是，是的，这将起作用。

您可以查看http://robertnyman.com/css3/media-queries/media-queries.html作为工作样本。

我看到的主要区别是Robert使用screen代替all。所以：

@media screen and (orientation: portrait) {
  ...
}

除此之外，浏览器可能存在一些差异。 Robert的解决方案适用于Chrome和FF。我不确定其他浏览器。（在旁注中，必须有比caniuse.com更好的caniuse :)）

桌面浏览器上的CSS媒体查询方向更改调整大小

1 个答案: