隐藏图片在响应式网页设计布局。

Question

我想仅在通过手机或平板电脑查看图像时才隐藏图像。

我该怎么做？

Answer 1

使用“显示：无”上IMGS仍然会下载不建议这样做，因为它是一个HTTP请求了垃圾图像（你可以通过查看浏览器的检查器中的网络选项卡中看到这个[点击右键，在Chrome中检查元素]，只需刷新页面，即可看到每个资源正在下载并下载所需的时间）。
相反，您可以制作那些您不希望在div上加载为背景图像的特定图像。
然后，所有你需要做的是：

@media (max-width: x) { 
    .rwd-img { 
     background-image: none; 
     } 

当然，你必须定义图像的高度和宽度在CSS的股利，但是这不是牺牲用户体验更好的选择。 :)

链接的兴趣：
http://css-tricks.com/on-responsive-images/
http://mattstow.com/responsive-and-retina-content-images-redux.html

Answer 2

您需要使用media queries，e.g：

@media (max-width: 979px) { 
    .img { 
     display: none; 
    } 
} 

你也应该考虑为Bootstrap这样一个框架，它提供了responsive utility classes。

Answer 3

对于媒体查询使用层叠样式表，当屏幕宽度小于640像素时，当观看者屏幕分辨率低于给定值（如本例中）时，您可以隐藏图像。

@media screen and (max-width: 640px) { 

    .my-image { 
     display: none; 
    } 

}