響應式網站—解決響應式圖片尺寸大小問題

背景圖片響應式解決辦法

圖片響應式解決方法

1、采用picture元素，如下代碼

  
  
  


這種方法已經被很多網站使用

2、采用srcset屬性，如下代碼

默認圖片" alt="" srcset="1倍大圖 600w 200h 1x, 2倍大圖 600w 200h 2x, 小圖 200w 200h">

srcset里面是根據媒體查詢條件顯示不同圖片，跟上面差不多一樣，表達方式不一樣，1x表示顯示器像素密度顯示倍數。

正常我是兩者結合的方式實現，各大瀏覽器*新的版本基本都支持，但是IE系列的不支持，這讓我們感到非常頭痛，兼容性具體如下圖。



比較嚴重的問題是QQ瀏覽器以IE為內核，微信瀏覽器不支持，而微信在國內的使用率非常高，加之微信公眾平臺的微官網是客戶的常見需求,*后解決辦法是使用Picturefill，效果非常好。