網(wǎng)站建造處理呼應(yīng)式網(wǎng)站圖片呼應(yīng)式難題 |
發(fā)布時間:2017-08-30 文章來源: 瀏覽次數(shù):3044 |
隨著移動設(shè)備的遍及,不同尺度的顯現(xiàn)終端越來越多,這些讓我們看到了呼應(yīng)式網(wǎng)站遍及的曙光光及火急需求。但呼應(yīng)式網(wǎng)站一個必需要處理的問題:如何將網(wǎng)站中的圖片圖片呼應(yīng)式。一張大圖如果PC端、平板端、手機端都是一樣大的話,實在太不科學(xué)了,一是手機流量占用過大,下載速度慢;其次就是圖片尺度大比例緊縮后會變得含糊。
如果圖片是以布景方法存在,這種比較好處理,能夠選用媒體查詢,為不同尺度的顯現(xiàn)終端設(shè)置不同圖片。但,如果是網(wǎng)頁中插入的圖片處理起來就比較復(fù)雜一點了。 一、選用srcset屬性
srcset里面是依據(jù)媒體查詢條件顯現(xiàn)不同圖片,跟上面差不多一樣,表達方法不一樣,1x表明顯現(xiàn)器像素密度顯現(xiàn)倍數(shù)。 正常我是兩者結(jié)合的方法完成,各大瀏覽器最新的版別根本都支撐,但是IE系列的不支撐,這讓我們感到十分頭痛。
比較嚴重的問題是QQ瀏覽器以IE為內(nèi)核,微信瀏覽器不支撐,而微信在國內(nèi)的使用率十分高,加之微信大眾渠道的微官網(wǎng)是客戶的常見需求,最終處理辦法是使用Picturefill,作用十分好。 二、選用picture元素 在追逐呼應(yīng)式網(wǎng)站建造的浪潮中,期望不要忘記了用戶體會,只要讓網(wǎng)站中所有的元素都能達到呼應(yīng)式的標(biāo)準(zhǔn),才是真實的呼應(yīng)式網(wǎng)站。 |
|