隨著移動設備的普及，越來越多的不同尺寸的顯示終端，讓我們看到響應式網站的普及的光榮和迫切需要。但是響應式網站有一個必須解決的問題：如何回應網站中的圖片。如果大圖片與PC，平板電腦和手機相同，那就太不科學了。首先，手機流量過大，下載速度慢。其次，在大壓縮后圖像尺寸將變得模糊。
如果圖片存在于背景模式中，則可以更好地解決，并且媒體查詢可以用于為不同尺寸的顯示終端設置不同的圖片。但是，如果插入網頁中的圖像被解決，則會更復雜。
首先，使用srcset屬性，代碼如下
<img src="默認圖片" alt="" srcset="1倍大圖 600w 200h 1x, 2倍大圖 600w 200h 2x, 小圖 200w 200h">Srcset是基于媒體查詢條件來顯示不同的圖像，與上面類似，表達式不一樣，1x表示顯示像素密度顯示倍數。
通常，我是兩者的組合?；旧现С种髁鳛g覽器的最新版本，但IE系列不支持它。這讓我們感到很頭疼。兼容性如下。
更嚴重的問題是QQ瀏覽器使用IE作為內核，微信瀏覽器不支持，而WeCin在中國的使用率非常高。此外，微信公眾平臺的微官網是客戶的共同需求。最終的解決方案是使用Picturefill。很好。
二，使用圖片元素，如下代碼
<picture alt="">
<source src="大圖路徑" alt="" media="(min-width: 640px)">
<source src="小圖" alt="" media="(max-width: 639px)">
<img src="默認圖片" alt="" alt="">
</picture>
在追逐響應式網站建設的浪潮中，我希望您不要忘記用戶體驗。只有當網站中的所有元素都能滿足響應標準時才是真正的響應式網站。