Question

我在前端使用Angular material-2，我想为台式机和手机屏幕显示不同的图像

我的代码如下所示

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

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

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

Answer 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进行美术指导？

根据设计，size / 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之外的所有内容，以及一种回退到常规非精美渲染的方法。

Answer 2

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

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。

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

2 个答案: