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

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

我的代码如下所示

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

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

---

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

我建议您阅读以下两篇文章：

这些文章的要点解释了和的用例

本质上，如果您试图以不同的质量级别显示相同的图像，这是一个响应性用例，那么您应该使用

：

<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" />

如果你想展示非常不同的图像，你可能会谈论艺术方向，在这种情况下，

是有意义的，因为：

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

根据设计，size/srcset语法考虑了视口的 宽度以及屏幕的DPR。将艺术方向添加到同一场景中 语法意味着web开发人员必须显式地 指定标记中的所有DPR和视口宽度组合

这将使web开发人员的工作更加困难和困难 这会使语法更难掌握，也会使语法更难理解 冗长的

因此，语法类似于：

<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之外的所有功能，以及一种退回到常规、非花哨渲染的方法。

下面是一个使用

窗口
DOM对象的属性
innerWidth
的解决方案：

isMobile（）{
return window.innerWidth Use或sourceset.ok，让我试试，它是否涵盖了大多数浏览器版本