逆***光

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