如何下載圖片僅適用於移動版本的網站？

-1

在我的網站的移動版本中，我有另一張主要配方的圖片，大小= 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>

來源

2017-11-25 Andrew Satori

您可以使用srcset大小屬性。 –

既然你不使用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/

來源

2017-11-25 18:54:32

如何下載圖片僅適用於移動版本的網站？

回答

相關問題