響應式圖片的處理

如果需要在響應式網頁設計中，針對不同的設備使用不同圖片的話?？梢岳肏TML5新增的picture標簽：

<picture> 
<source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
<source srcset="default.jpg, default_retina.jpg 2x">
<img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

另外，兼容性問題方面，可以使用polyfill: http://scottjehl.github.io/picturefill/

<picture> 
<!--[if IE 9]><video style="display: none;"><![endif]--> 
<source srcset="smaller.jpg" media="(max-width: 768px)"> 
<source srcset="default.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="default.jpg" alt="My default image"> </picture>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,283評論 25贊 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • <a name='html'>HTML</a> Doctype作用？標準模式與兼容模式各有什么區別? （1）、<...
    clark124閱讀 3,553評論 1贊 19
  • 我終于失去你了 還在人前裝作快樂 可其實沒人看我笑著 或是眼淚落了幾顆 但你曾經為什么 短暫停留卻讓人深刻 你終于...
    夏小溪_閱讀 249評論 6贊 3
  • 如果可能，我仍然不希望面對很多事情，但是那些已經發生了的，我會好好去面對。 上學的時候，無論班里有多少同學，宿舍是...
    浪漫的高貴閱讀 870評論 16贊 11