現(xiàn)在的用戶(hù)瀏覽網(wǎng)站的設(shè)備越來(lái)越多樣化了，有PC、平板、手機(jī)，而且屏幕尺寸也大有不同，所以現(xiàn)在越來(lái)越多的企業(yè)選擇做響應(yīng)式網(wǎng)站，響應(yīng)式網(wǎng)站可以自適應(yīng)屏幕尺寸，但是有一點(diǎn)不好，就是圖片太大，在PC上可能不明顯，但在手機(jī)上就顯得有點(diǎn)大了，如果不是用Wifi的話(huà)，消耗手機(jī)流量還是挺大的，下面廣州騰虎網(wǎng)站建設(shè)公司就來(lái)分享一下響應(yīng)式網(wǎng)站怎么處理圖片大小？

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

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

srcset里面是根據(jù)媒體查詢(xún)條件顯示不同圖片，跟上面差不多一樣，表達(dá)方式不一樣，1x表示顯示器像素密度顯示倍數(shù)。正常我是兩者結(jié)合的方式實(shí)現(xiàn)，各大瀏覽器更新的版本基本都支持，但是IE系列的不支持，比較嚴(yán)重的問(wèn)題是QQ瀏覽器以IE為內(nèi)核，微信瀏覽器不支持，而微信在國(guó)內(nèi)的使用率非常高，加上微信公眾平臺(tái)的微官網(wǎng)是客戶(hù)的常見(jiàn)需求,更后解決辦法是使用Picturefill，效果非常好。

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

<picture alt="">

<source src="大圖路徑" alt="" media="(min-width: 640px)">

<source src="小圖" alt="" media="(max-width: 639px)">

<img src="默認(rèn)圖片" alt="" alt="">

</picture>

想要提高網(wǎng)站的用戶(hù)體驗(yàn)，響應(yīng)式網(wǎng)站是基本，在做好響應(yīng)式網(wǎng)站的同時(shí)，還有充分考慮用戶(hù)體驗(yàn)，現(xiàn)在的互聯(lián)網(wǎng)時(shí)代，是用戶(hù)體驗(yàn)為王的時(shí)代，只要網(wǎng)站用戶(hù)體驗(yàn)做的好，網(wǎng)站的流量自然就會(huì)高。