使用最大设备宽度调整大小时如何隐藏图像？

Question

当我在移动设备上查看时，需要使img消失

 <div id="art">
<img src="../images/canO.jpg" alt="" width="500" height="500"/>
</div>

@media screen and (max-device-width:450px) {...}}

Answer 1

使用此媒体查询。

 @media screen and (max-device-width:450px) { #art img{ display:none; } } 

我不明白你在问什么。 如果不是您需要的解决方案，请进一步解释您的问题。 :) :)

Answer 2

对不起，匆匆我想写这样的DEMO

@media screen and (max-width:450px){
    #art img{
        display:none;
    }
}

or

   @media screen and (max-width:450px){
        #art img{
             visibility: hidden;
        }
    }

Answer 3

你是这个意思？

@media screen and (max-device-width:450px){
    #art img{
        display:none;
    }
}

Answer 4

@media screen and (max-device-width:450px) {  .art img { display: none !important;} 

Answer 5

您可以隐藏整个div #art { display:none; } #art { display:none; }或向图像添加一个类。 另外，也可以使用#art img { display:none; } #art img { display:none; }

我只会使用屏幕宽度，如下所示：

@media screen and (max-width:450px) {   
  #art {         
     display:none;
  } 
}