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

前端之家收集整理的这篇文章主要介绍了javascript – 在小屏幕上隐藏/显示图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我有这个代码如下所示

我想在大型设备中显示desktopBanner图像,在小屏幕中显示mobileBanner.

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

最佳答案
我建议你阅读这两篇文章

> Don’t use (most of the time)
> Native Responsive Images

这些文章的关键在于解释的用例.

基本上,如果您尝试以不同的质量级别显示相同的图像,这是一个响应用例,您应该使用< img srcset =“...”>:

Kettlebell Swing

如果你想展示非常不同的图像,你可能会谈论艺术方向,在这种情况下,< picture>有道理,因为:

Why can’t we do art-direction with sizes/srcset?

By design,the sizes/srcset Syntax takes into account the viewport’s
width as well as the screen’s DPR. Adding art-direction into the same
Syntax would have meant that the web developer has to explicitly
specify all the DPR and viewport width combinations in the markup.

That would have made the web developer’s job much more difficult and
would have made the Syntax much harder to grasp and significantly more
verbose.

所以语法类似于:

这两种解决方案都有很好的支持:除了IE之外的所有东西,以及回退到常规,非奇特渲染的方法.

原文链接:https://www.f2er.com/js/429267.html

猜你在找的JavaScript相关文章