我在前端使用Angular material-2, 我想为台式机和手机屏幕显示不同的图像
我的代码如下所示
<div class="banner">
<img [src]="images.desktopBanner"/>
<img [src]="images.mobileBanner"/>
</div>
我想在大型设备上显示desktopBanner图像,在小屏幕上显示mobileBanner。
注意:标记显示:不使用媒体查询不是最好的解决方案,因为这可能不会同时显示两个图像,但是如果您检查网络呼叫,它将仍然下载两个图像。
答案 0 :(得分:3)
我建议您阅读这两篇文章:
这些文章的重点解释了<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之外的所有内容,以及一种回退到常规非精美渲染的方法。
答案 1 :(得分:0)
这是使用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
。