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) {...}

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

＆＃13;

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;
  }  
}

＆＃13;

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

＆＃13;

在测试上面的全宽度并将浏览器窗口设置为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中放置的最后一个，当两个条件都成立时，它们是适用的，如果它们是同时真实的话。

独家宽高比媒体查询

1 个答案: