好用的幾種常用的響應式設計讓圖片自適應的辦法
本文轉載於:猿2048網站好用的幾種常用的響應式設計讓圖片自適應的辦法
Ethan Marcotte曾經在A List Apart上發表過一篇名為“Responsive Web Design”的文章，他當時就提出了響應式架構的概念（不少混跡技術圈的肯定看過這篇文章，這裡就不再贅述了）。隨著終端裝置的日益豐富，無法針對裝置型別、尺寸或瀏覽器進行自適應調整的影象會嚴重減慢網站的訪問速度，最終導致使用者流失。
一，談到圖片自適應，很多前端開發人員會不假思索的來一句“寬度100%”
例如：
1 <html> 2 <head> 3 <style>4 html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;} 5 .imgBox, .imgBox img{width:100%;height:100%;} 6 </style> 7 </head> 8 <body> 9 <div class="imgBox"> 10 <img src="1.jpg" /> 11 </div> 12 </body>13 </html>
<html>
<head>
<style>
html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;}
.imgBox, .imgBox img{width:100%;height:100%;}
</style>
</head>
<body>
<div class="imgBox">
<img src="1.jpg" />
</div>
</body>
</html>
精髓可以是這樣一行CSS程式碼：
1 img{ width:100%;height:auto;max-width:100%;display:block;}
img{ width:100%;height:auto;max-width:100%;display:block;}
如果背景圖片，就用background-size，例如：
為canvas標籤增加自定義背景：
1 #myCanvas { 2 background-image: url(${webRoot }/webpage/weixin/images/agency.jpg); 3 background-size: 100%; 4 }
#myCanvas {
background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
background-size: 100%;
}
注：url中是圖片的路徑，大家需自行修改。
沒錯，就是這麼一行簡短的程式碼！部分前端開發者認為這行程式碼既簡潔又高效，很好地解決了圖片自適應問題，但有部分前端開發者認為這種方法無法解決解析度問題，無法保證圖片不失真，這個問題到底應該如何解決呢？
一個影象版本顯然是不夠的，為了確保各個螢幕尺寸之間的平滑過渡，設計師必須以不變應萬變。也就是說，必須採取靜態的方式使影象適應性更強。對於靈活的佈局大小和螢幕密度的多樣性都有相同的解決方案：提供可變解析度的影象。圖片分為背景圖片和通過img標籤引入的圖片，我們是應該使用高解析度影象來利用高解析度硬體，還是使用小影象以便在低分辨環境中快速載入？
通過提供同一影象的不同版本（大小和解析度），可以向需要的網站訪問者傳送高解析度版本，為不具有此功能的網站提供較低解析度的版本。要了解需要多少不同版本，可以採取以下步驟：
建立尺寸和解析度範圍的極限，並記錄各種尺寸和解析度。
使用新的響應式影象標記來標記備用版本，以便瀏覽器可以載入最適合使用者螢幕解析度和視窗大小的版本。
具體到程式碼級，前端開發應該怎麼做呢？
面對格式問題，我們可以儘量讓瀏覽器替我們決定。過去，實際上只有四種影象格式具備通用接受性：GIF，JPEG，PNG或SVG。然而，今天的響應式，太多可變格式的影象允許開發者使用新的技術，以便可以在支援的瀏覽器中使用其他更新更好的格式，在不支援的瀏覽器中繼續使用舊格式。
<img src="800px.png" srcset="400px.png 400w, 800px.png 800w, 1600px.png 1600w, 2400px.png 2400w, 3200px.png 3200w" sizes="80vw">
<img src="800px.png" srcset="400px.png 400w, 800px.png 800w, 1600px.png 1600w, 2400px.png 2400w, 3200px.png 3200w" sizes="80vw">
綜述
網站載入時間延遲一秒就可能會導致網站轉化率下降7％，建立響應式Web環境是棘手的，它需要微妙的平衡。但是，在不同螢幕尺寸和裝置功能的世界中，建立這種圖片自適應是必要的。總結下來基本是兩種方法：如果不在乎解析度，開發者可以沿用寬度100%的方法，這種方法是最簡便的；如果需要考慮解析度，就需要查詢清楚不同裝置的解析度，然後採用第三方服務或在程式碼層自主進行設