逆***光

作者：羅剛 鏈接：https://www.zhihu.com/question/233****3/answer/243****3 來源：知乎 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 圖片確實是響應(yīng)式設(shè)計的一大問題圖片分為背景圖片和通過img標(biāo)簽引入的圖片，前者可以通過media query自動的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調(diào)整大小（也就是在media query切換css的點上可以換一張不同分辨率的圖，但是沒法兒獲得兩張分辨率中間大小的版本），而且在很多情況下（比如cms中）并不適合用背景圖片。如果是img標(biāo)簽引入的圖片，可以使用延遲加載的方式來加載，在實際加載圖片之前先用js檢查窗口寬度，然后加載不同分辨率的圖片，比如寬度<=480,就加載80px寬度的圖片，480 < 寬度 <= 768，加載120px的圖片， 寬度> 768則加載160px的圖片，如果寬度是600px怎么辦呢，通過百分比來縮放120px的圖片達(dá)到合適的結(jié)果。這樣做的好處是對于移動設(shè)備來說，下載的圖片會小一些，減少網(wǎng)頁加載的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由于放大而產(chǎn)生一定的模糊感。我覺得響應(yīng)式設(shè)計中對于圖片的考慮應(yīng)該從布局設(shè)計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內(nèi)容而不是擴大圖片的尺寸來填充由于瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。