隐藏图像在响应式网页设计布局中.

Question

我想只在从手机或平板电脑上查看图像时隐藏图像.

我怎样才能做到这一点？

Answer 1

在imgs上使用'display:none'仍然会下载不推荐的图像,因为它的http请求已经浪费了(你可以通过查看浏览器检查器中的网络选项卡来看到这一点[右击,检查Chrome中的元素].刷新页面,您将看到正在下载的每个资产以及下载它所需的时间.
相反,您可以将那些您不希望加载的特定图像作为背景图像加载到div上.
那么你需要做的就是:

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

当然,您必须在CSS中为div定义图像的高度和宽度,但这比牺牲用户体验更好.:)

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