如何下载图片仅适用于移动版本的网站?
问题描述:
在我的网站的移动版本中,我有另一张主要配方的图片,大小= 70KB,并且我希望下载的图像仅用于移动版本,该怎么做?我做了这个解决方案,也许有人有更好的解决方案? SCR 60B像素进行验证ALT =按住Alt + 255如何下载图片仅适用于移动版本的网站?
https://satoriq.github.io/Lemon-Recipes/上门检查下载
<picture>
<source media="(max-width: 425px)"
srcset="img/main-recipe-mobile.jpg">
<img class="main-recipe__mobile" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt=" ">
</picture>
答
既然你不使用JavaScript我认为最好的办法是这样的:
<style>
.desktop {display: block;}
.mobile {display: none;}
@media (max-width: 425px) {
.desktop {display: none;}
.mobile {display: block;}
}
</style>
<figure>
<figcaption>FIGURE CAPTION TEXT</figcaption>
<img class="desktop" src="desktop.jpg" alt="alternative text for desktop" />
<img class="mobile" src="mobile.jpg" alt="alternative text for mobile" />
</figure>
PS: 为了添加推荐的无花果图,我将图片标签更改为图形。如果您愿意,可以将其更改回图片。
好运和你可以阅读更多有关媒体查询的位置: https://www.w3.org/TR/css3-mediaqueries/
您可以使用srcset大小属性。 –