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

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

Answer 2

你会想要使用媒体查询，例如：

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

您还应该研究提供响应式实用程序类的框架，例如Bootstrap。

Answer 3

使用带有媒体查询的级联样式表，您可以在查看者屏幕分辨率低于给定值时隐藏图像，例如当屏幕宽度小于 640 像素时。

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

    .my-image {
        display: none;
    }

}