響應式圖片

「響應式（Responsive）」這個詞我想你們沒有聽過一千遍，也有一百遍了。響應式是指實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。網上介紹響應式的文章也有不少了，好比：《自適應頁面設計》。在這篇文章中，咱們不講頁面佈局的響應式，咱們主要來看看「響應式圖片」。

這篇文章主要內容：

• 爲何要使用響應式圖片
• 元素
• img的srcset、sizes屬性

一、爲何要使用響應式圖片
假若有一張圖片的顯示寬度爲200px，那麼，它在 1x（即設備像素比爲 1 的顯示器） 的顯示器上，是佔了 200 個物理像素（即實際所佔的像素）；它在 2x 的顯示器上，其實是佔了 400 個物理像素；在 3x 的顯示器上，其實是佔了 600 個物理像素；在 4x 的顯示器上就是佔了 800 個物理像素。

若是這個圖片只提供 200 像素的尺寸，那麼在 2x~4x 的顯示器上看起來就很模糊。若是隻提供 800 像素的版本，那麼在 1x~3x 的設備上會顯得多餘，由於加載時間會相較長，因此咱們要使用響應式圖片。

咱們有兩種方法來設置響應式圖片：
使用 元素（HTML5新增）
使用img的srcset、sizes

二、picture元素
在HTML 5中，增長了一個新元素 。用過 、 的，會以爲 的用法很熟悉：

 
  
  
  
複製代碼

不知道你注意到沒有，在 media 屬性使用的語法與CSS媒體（media）特性中使用的語法同樣。你可使用相同的特性，也就是說你能夠查詢 max-width ， min-width ， max-height ， min-height ， orientation 等屬性。

看到 這個元素是否是很興奮，但是不得不提醒你一句，目前來講，這個元素仍是有部分兼容性問題的。

兼容性：兼容性

固然，若是你必定要使用 這個元素，又要在其餘瀏覽器裏支持，那你就須要添加一個額外的插件：Picturefill2.0

複製代碼