當前位置:首頁 > 建站知識 >

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




文章來源:喆琛網絡標簽:響應式網站 瀏覽: 發布時間:2016-03-23

隨著網站開發技術的發展,瀏覽器的升級,操作系統的升級,HTML5\CSS3技術的推出,對HTML5的支持變得越來越全面,也讓舊瀏覽器的占有率越來 越低,同時不同尺寸的顯示終端越來越多,這些讓我們看到了響應式網站普及的署光及迫切需求。但,今天要談的是響應式網站一個必須要解決的問題:圖片響應式,一張大圖如果PC端是這么大、平板端是這么大、手機端還是這么大的話,實在太不科學了,一是手機流量占用過大,下載速度慢;其次就是圖片大比例壓縮后變得模糊。
響應式網站—解決響應式圖片尺寸大小問題

背景圖片響應式解決辦法

如果圖片是以背景方式存在,這種比較好解決,可以采用媒體查詢,為不同尺寸的顯示終端設置不同圖片。

圖片響應式解決方法

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

<picture alt="">
  <source src="大圖路徑" alt="" media="(min-width: 640px)">
  <source src="小圖" alt="" media="(max-width: 639px)">
  <img src="默認圖片" alt="" alt="">
</picture>

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

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

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

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

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

srcset響應式圖片兼容性

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





上一篇:當搜索引擎越來越挑剔網站收錄越來越難時我們能做什么
下一篇:如何從無到有建立Web站點

我們的客戶