? ? ? 現在移動互聯網日新月異，各種移動設備層出不窮，在iPhone 4上最先出現視網膜屏幕后，這種技術快速的被大多數智能移動設備所采用，可以遇見將會快速的普及開來。  ? ? ??但是這也對我們的Web提出了更高的要求，因為我們需要適配更為復雜的UI方案。 ? ? ??適配圖像將會是響應式網絡設計下一個需要解決的問題，因為我們針對不同分辨率的屏幕，例如iPhone 4s和iMac，最佳的方案是分別提供不同的圖像。因為為低分辨率的屏幕提供高分辨率圖像浪費帶寬并影響下載速度，而為高分辨率的屏幕提供低分辨率圖像又非常影響體驗。 ? ? ??HTML5規范正在討論分辨率圖像的原生適配支持，其中一種比較可靠的[方案](http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-May/035746.html)如下： ~~~ <img src="foo-lores.jpg" srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x" alt="decent alt text for foo."> ~~~ ? ? ??這種方式為img標簽引入了一個新的srcset屬性，通過2x和6.5x這種形式來告訴瀏覽器屏幕相對分辨率所采用的適配圖像。請注意我們并沒有使用媒介查詢Media Query。 ? ? ??另外與此類似的[image set方案](http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html)（作為CSS4的一部分）已經被添加到WebKit里，示例如下： ~~~ selector { background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center; } ~~~ ? ? ? srcset方案目前還在討論和完善中，但是可以預見，我們將會有一個可靠的技術方案和標準。 ? ? ??最后不要忘了，針對響應式圖像，我們還有SVG這個強大而美妙的方案（詳見《[了解SVG](http://blog.csdn.net/hfahe/article/details/7661494)》）。 ? ? ? 轉載請注明：來自[蔣宇捷的博客](http://blog.csdn.net/hfahe)