独家长宽比媒体查询 [英] Exclusive Aspect Ratio Media Query

问题描述

仅当浏览器宽度> 1200 px时，我才想在网站的侧面显示图片，但是我想根据宽高比使用两张图片中的一张.我想我需要使用

I want to have a picture at the side of my site only if the browser width is >1200 px, but I want to use one of two pictures depending on the aspect ratio. I suppose I need to use

  @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，则用户将不得不下载两个图像.

However I worry that if the window is exactly 8:5, the user will have to download both images.

感谢您对任何确保仅加载一张图像的帮助，谢谢

Any help on how to make sure only one image loads would be much appreciated, thanks

推荐答案

经过一些测试，事实证明您不需要更改任何内容:

After a bit of testing, it turns out you don't need to change a thing:

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

我做了一个演示.以原尺寸打开它，然后调整浏览器大小.它们永远不会相同(对或错).

I made a demo. Open it in full size and resize the browser. They'll never be both the same (true or false).

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中对其进行了测试.

While testing the above in full width and setting browser window to be exactly 800px x 500px it says not above 8/5 and below 8/5. I tested it in IE10, FF and Chrome.

但是，如果您要确保只应用一种，则不必依赖浏览器.即使这两个条件都成立，如果您为两个媒体查询修改相同元素的相同属性，则只会应用一个

However, if you want to make extra sure that only one applies, you don't have to rely on browsers. Even if both conditions are ever true, if you modify the same property of the same element for both media queries, only one will apply:

@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中放置的最后一个，即同时满足两个条件的情况下适用的条件.

If two rules apply on the same property of the same element, the one with the stronger selector applies or, if the selector is identical, the last one parsed by CSS applies. And there you have it! The last one you place in CSS, that's the one that applies when both conditions are true, if they ever are true simultaniously.

这篇关于独家长宽比媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！