独家宽高比媒体查询

Question

仅当浏览器宽度大于 1200 像素时，我才希望在我的网站旁边放一张图片，但我想根据纵横比使用两张图片中的一张。我想我需要使用

  @media all and (min-width: 1201px)  and (min-aspect-ratio: 8/5){
#div {background-image:url(pic1.jpg);}}
@media all and (max-width: 1201px)  and (max-aspect-ratio: 8/5){
#div {background-image:url(pic2.jpg);}}

但是我担心如果窗口正好是 8:5，用户将不得不下载两个图像。

任何关于如何确保只加载一张图片的帮助将不胜感激，谢谢

Answer 1

经过一番测试，事实证明你不需要改变任何东西：

@media (min-aspect-ratio: 8/5) {...}
@media (max-aspect-ratio: 8/5) {...}

我做了一个演示。以全尺寸打开它并调整浏览器的大小。它们永远不会相同（真或假）。

body {margin: 0;}
.\31\30\30\25 {
  display: flex;
  min-height: 100vh;
  background-color: #eee;
  justify-content: center;
}
.\35\30\25 {
  flex-basis: 50%;
  min-height: 50vh;
  border: 1px solid #eee;
  background-color: #fff;
  align-self: center;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12);
  position: relative;
}
.\35\30\25:before, .\35\30\25:after  {
  padding: 20px;
  background-color: rgba(255,255,255,.75);
  border: 1px solid white;
  position: absolute;
  width: calc(25vw - 40px);
  box-sizing: border-box;
  color: red;
}
.\35\30\25:before {
  right: calc(100% + 20px);
  transform: translateY(-50%);
  content: 'not above 8/5';
  text-align: right;
}

.\35\30\25:after {
  left: calc(100% + 20px);
  bottom: 0;
  transform: translateY(50%);
  content: 'not below 8/5'
}
@media (min-aspect-ratio: 8/5){
  .\35\30\25:before {
    content: 'above 8/5';
    color: black;
  }  
}
@media (max-aspect-ratio: 8/5){
  .\35\30\25:after {
    content: 'below 8/5';
    color: black;
  }  
}

<div class="100%">
  <div class="50%">
  </div>
</div>

在全宽测试上述内容并将浏览器窗口设置为完全800px x 500px 时，它显示not above 8/5 和below 8/5。我在 IE10、FF 和 Chrome 中测试过。

但是，如果您想额外确保只有一个适用，则不必依赖浏览器。即使这两个条件都为真，如果您为两个媒体查询修改同一元素的相同属性，也只有一个适用：

@media (min-aspect-ratio: 8/5) {
    [same-selector] {
        [same-property]: [some-value];
    }
}
@media (max-aspect-ratio: 8/5) {
    /* 
     * This one will apply if both media conditions are ever true.
     * If you want the other one, place that media query below this one.
     */
    [same-selector] {
        [same-property]: [different-value]; 

    }
}

如果两个规则适用于同一元素的相同属性，则应用具有更强选择器的规则，或者，如果选择器相同，则应用最后一个由 CSS 解析的规则。你有它！您在 CSS 中放置的最后一个，当两个条件都为真时应用，如果它们同时为真。