html - 我的图像没有切换到移动格式。我的代码在某处有问题吗？

Question

这是我面临的问题。调整窗口大小时，图像不会相互切换。我有 3 种不同设备的 6 种不同格式：

• 320x340 和 640x680（移动）
• 870x340 和 1740x680（平板电脑）
• 1600x340 和 3200x680（桌面）

我可以在台式机和平板电脑之间切换，但我从来没有得到移动格式。我无法弄清楚代码的哪一部分是错误的。在编码方面，我绝对是个菜鸟。任何人都可以帮忙吗？非常感谢！

<style>
    
    .universHeroContainer {
        background-image: url('[imagePath]Attachment/LandingPage/2020/07/03/new/U1-FR-small-320x340_FR.jpg[imageHash]');
        }
        
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) { 
    
      /* Small screen, retina, stuff to override above media query */
        .universHeroContainer {
        background-image: url('[imagePath]Attachment/LandingPage/2020/07/03/new/U1-FR-small-640x680_FR.jpg[imageHash]');
        }
    }
    
    
        @media only screen and (min-width: 440px) {
          /* Small screen, non-retina */
            .universHeroContainer {
            background-image: url('[imagePath]Attachment/LandingPage/2020/07/03/new/U1-FR-middle-870x340_FR2.jpg[imageHash]');
            }
        }
    
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 440px),
        only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 440px),
        only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 440px),
        only screen and (        min-device-pixel-ratio: 2)      and (min-width: 440px),
        only screen and (                min-resolution: 192dpi) and (min-width: 440px),
        only screen and (                min-resolution: 2dppx)  and (min-width: 440px) { 
    
      /* Small screen, retina, stuff to override above media query */
        .universHeroContainer {
        background-image: url('[imagePath]Attachment/LandingPage/2020/07/03/new/U1-FR-middle-1740x680_FR.jpg[imageHash]');
        }
    }
        
    @media only screen and (min-width: 880px) {
    
      /* Small screen, non-retina */
        .universHeroContainer {
        background-image: url('[imagePath]Attachment/LandingPage/2020/07/03/new/U1-FR-large-1600x340_FR2.jpg[imageHash]');
        }
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 880px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 880px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 880px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 880px),
    only screen and (                min-resolution: 192dpi) and (min-width: 880px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 880px) { 
    
      /* Small screen, retina, stuff to override above media query */
        .universHeroContainer {
        background-image: url('[imagePath]Attachment/LandingPage/2020/07/03/new/U1-FR-large-3200x680_FR_2.jpg[imageHash]');
        }
    }
        
        
        .univers-title {
        display: flex;
        justify-content: center;
    }
    
    .universHeroContainer {
        position: relative;
        top: -20px;
        margin-top: -5px;
        margin-bottom: -25px;
        width: 100%;
        height: 340px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    
    .universHeroContainer > p {
        font-family: 'Playfair Display', serif;
        color: #000000;
    }
    
    .universHeroContainer > p:nth-child(1) {
        font-size: 18px;
        font-family: 'Source Sans Pro', sans-serif !important;
        letter-spacing: 0.2em; 
    }
    
    .universHeroContainer > p:nth-child(2) {
        font-size: 48px;
    }
    
    @media screen and (max-width: 880px) {
        .universHeroContainer {
            background-position: center top;
        }
        
        
        .imgDepartment-bg { 
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    
    @media screen and (min-width: 1280px) {
        .universHeroContainer {
            margin-bottom: -30px;
        }
        
        .rowContainer.no-pad{
            max-width: 100%!important;
        }
        }
    
    </style>

标签： htmlcssresponsive-images