wordpress - 在响应式网页设计布局中隐藏图像。

Question

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

我怎样才能做到这一点？

Answer 1

在 imgs 上使用 'display: none' 仍然会下载不推荐的图像，因为它是一个浪费掉的 http 请求(您可以通过查看浏览器检查器中的网络选项卡来看到这一点[右键单击，在 Chrome 中检查元素]。只是刷新页面，您将看到正在下载的每个 Assets 以及下载所需的时间。)
相反，您可以将那些您不希望加载为 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