RWD之下圖片置換方法

RWD之下圖片置換方法

方法1:利用CSS,background屬性,配合@media

範例結果

<div></div>
*{padding: 0; margin: 0;}
div{min-width: 100vw;min-height: 100vh;
    background:  no-repeat center center; background-size:cover;
    background-image: url(image/rwdDefault.png)}

@media (min-width: 992px){
    div{background-image: url(image/rwdL.png)}
}
@media (max-width: 768px){
    div{background-image: url(image/rwdM.png)}
}
@media (max-width: 576px){
    div{background-image: url(image/rwdS.png)}
}

方法2:利用CSS,idsplay:none;,配合@media

範例結果

<div>
    <img src="img/rwdDefault.png">
    <img src="img/rwdL.png">
    <img src="img/rwdM.png">
    <img src="img/rwdS.png">
</div>

圖片設定 max-width: 100%;以確保圖片不會超出畫面

*{padding: 0; margin: 0;}
div{max-width: 100%;min-height: 100%;}
div img{display: none; 
        max-width: 100%; height: auto;}
div img:nth-child(1){display: block;}
@media (min-width: 992px){
    div img:nth-child(1){display: none;}
    div img:nth-child(2){display: block;}
}   
@media (max-width: 768px){
    div img:nth-child(1){display: none;}
    div img:nth-child(3){display: block;}
}
 @media (max-width: 576px){
    div img:nth-child(1){display: none;}
    div img:nth-child(3){display: none;}
    div img:nth-child(4){display: block;}
}

方法3:利用Html5,pciture標籤

範例結果

<picture>

html5 標籤針對不同解析度的裝置、設定載入不同的圖片。既可以更符合設計、又可以節省載入的時間。(參考連結)

<picture>
    <source srcset="img/rwdL.png" media="(min-width: 992px)">
    <source srcset="img/rwdM.png" media="(min-width: 768px)">
    <source srcset="img/rwdS.png" media="(max-width: 576px)">
    <img src="img/rwdDefault.png" alt="">
</picture>

分辦高解析度Retina螢幕<picture>

<picture>
    <source srcset="img/rwdL.png, img/rwdL@2x.png 2x" media="(min-width: 992px)">
    <source srcset="img/rwdM.png, img/rwdM@2x.png 2x" media="(min-width: 768px)">
    <source srcset="img/rwdS.png, img/rwdS@2x.png 2x" media="(max-width: 576px)">
    <img src="img/rwdDefault.png" alt="">
</picture>

<picture>的使用規則:

  1. source順序:當瀏覽器讀取到符合條件的描述時、就會直接忽略之後的描述。
  2. 在<picture>結束前放上一個標準的<img>:當<picture>在舊版瀏覽器上也能正確的顯示圖片。

利用JS解決<picture>在舊版瀏覽器上問題

<script src="js/jquery-1.12.4.js"></script>
<script src="js/picturefill.js"></script>

參考連結