@media 查询 <img> src 交换不起作用答案

【问题标题】：@media query <img> src swap not working@media 查询 <img> src 交换不起作用
【发布时间】：2017-03-19 04:40:12
【问题描述】：

我在这里查看了一些问题和答案，但仍然找不到我的问题。

我想要做的是：根据屏幕大小打开或关闭这三个图像的显示属性。一次只能显示一张图像。

除了@media 查询部分中列出的内容外，我没有对 .imagephone 应用任何 CSS。

.imgcontainer{
    background-color: red;
    width: 100%;
    overflow: hidden;
    max-width: 1500px;
    margin: auto;
}

.imagetablet{
    display: none;
}

.imagedesktop{
    display: none;
}

/**************@Media Tablets****************/
    
    @media screen and (max-width="800px"){
        .imagephone{display:none;}
        .imagetablet{display:block;}
        .imagedesktop{display:none;}
        }

/**************@Media Desktop*****************/
    
    @media screen and (max-width="1200px"){
        .imagephone{display:none;}
        .imagetablet{display:none;}
        .imagedesktop{display:block;}
        }

<div class="imgcontainer">
        <img class="imagephone" src="BannerPicSmall.png">
        <img class="imagetablet" src="BannerPicMedium.png">
        <img class="imagedesktop" src="BannerPicLarge.png">
    </div>

【问题讨论】：

请查看此链接：-stackoverflow.com/questions/27853884/…
你打错字了，应该是max-width:1200px，带冒号...不带引号...交换@media查询并将@Media tablets放在最后

标签： html css

【解决方案1】：

 	.imgcontainer{
    background-color: white;
    width: 100%;
    overflow: hidden;
    max-width: 1500px;
    margin: auto;
}

.imagetablet{
    display: none;
}

.imagedesktop{
    display: none;
}

/**************@Media Tablets****************/
    
    @media screen and (max-width:800px){
        .imagephone{display:none !important;}
        .imagetablet{display:block !important;}
        .imagedesktop{display:none !important;}
        }

/**************@Media Desktop*****************/
    
    @media screen and (max-width:1200px){
        .imagephone{display:none !important;}
        .imagetablet{display:none !important;}
        .imagedesktop{display:block !important;}
        }

<div class="imgcontainer">
        <img class="imagephone" src="http://www.claudelorrain.org/An-Artist-Studying-Nature.jpg">
        <img class="imagetablet" src="http://hdwallpaperia.com/wp-content/uploads/2015/01/Nature-Wallpaper-daydreaming-34811101-1024-7686-640x480.jpg">
        <img class="imagedesktop" src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Beautiful-Nature-Desktop-Wallpaper-640x360.jpg">
    </div>

试试这个。

希望对你有帮助。

【讨论】：