在小屏幕上隐藏/显示图像答案

【问题标题】：Hide/show image on small screen在小屏幕上隐藏/显示图像
【发布时间】：2018-07-19 15:20:25
【问题描述】：

我在前端使用 Angular material-2，我想为桌面和移动屏幕显示不同的图像

我的代码如下所示

<div class="banner">
  <img [src]="images.desktopBanner"/>
  <img [src]="images.mobileBanner"/>
</div>

我想在大设备上显示 desktopBanner 图片，在小屏幕上显示 mobileBanner。

注意：使用媒体查询标记 display:none 不是最好的解决方案，因为这可能不会同时显示两个图像，但如果您检查网络调用，它仍然会下载两个图像。

【问题讨论】：

使用<picture> 或源集。
好的，让我试试，它是否涵盖了大多数浏览器版本

标签： javascript angular angular-material angular-material2

【解决方案1】：

我建议你阅读这两篇文章：

这些文章的核心解释了<picture> 和<img srcset="..."> 的用例。

本质上，如果您试图以不同的质量级别显示相同的图像，这是一个响应性用例，您应该使用<img srcset="...">：

<img 
   src="swing-400.jpg" 
   sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 
   srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" 
   alt="Kettlebell Swing" />

如果您想展示非常不同的图像，您可能会谈论艺术指导，在这种情况下，<picture> 是有道理的，因为：

为什么我们不能使用尺寸/srcset 进行艺术指导？

根据设计，sizes/srcset 语法考虑了视口的宽度以及屏幕的 DPR。将艺术指导添加到相同的语法意味着 Web 开发人员必须明确在标记中指定所有 DPR 和视口宽度组合。

这会使网络开发人员的工作变得更加困难，而且会使语法更难掌握，而且更多详细。

所以语法类似于：

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

两种解决方案都有很好的支持：除了 IE 之外的所有解决方案，以及一种回退到常规、非花哨渲染的方法。

【讨论】：

【解决方案2】：

这是使用window DOM 对象的属性innerWidth 的解决方案：

isMobile() {
  return window.innerWidth <= 640;
}

<div class="banner">
    <img *ngIf="!isMobile()" [src]="images.desktopBanner"/>
    <img *ngIf="isMobile()" [src]="images.mobileBanner"/>
</div>

这里，images.mobileBanner 将在浏览器的内部宽度小于等于 640px 时显示（根据您的要求调整...），否则将使用images.desktopBanner。

【讨论】：