0

我不完全确定这应该如何在台式机上工作，但我很确定当您调整浏览器的大小时，方向应该会改变（假设高度大于宽度并且在调整大小之后是相反的）。

也就是说，我不知道为什么以下代码仅在页面加载时生效。

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

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

4

1 回答 1

0

Fabrizio Calderan 的解决方案是给定用例的最佳解决方案，但如果您需要检测纵向和横向的变化，原始问题的答案是，是的，这将起作用。

您可以查看http://robertnyman.com/css3/media-queries/media-queries.html以获取工作示例。

我看到的主要区别是罗伯特使用screen而不是all. 所以：

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

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

于 2014-07-25T18:34:29.953 回答