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

【问题标题】：CSS media query orientation change on desktop browser resize桌面浏览器调整大小上的 CSS 媒体查询方向更改
【发布时间】：2013-10-25 09:41:53
【问题描述】：

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

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

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

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

【问题讨论】：

你应该使用 jquery 来调整大小
@C-Link 这是我最后的选择，以防 CSS 不起作用。你知道我的 CSS 不会以任何方式工作吗？
对不起，我不知道用css......
background-size:cover（没有媒体查询）能解决问题吗？
@FabrizioCalderan 太棒了！是的，它确实。如果您愿意将您的评论推广到答案，我很乐意接受。

标签： css orientation media-queries

【解决方案1】：

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

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

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

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

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

【讨论】：