隨着我們的Retina熒幕越來越在生活中普及，隨之而來的是每個圖片都需要包含各自的 @2x （甚至是 @3x ）版本，哪麼我們在網頁中該怎麼辦呢？今天「暢想資源」就向大家來介紹這個HTML5的實用新屬性 srcset 的具體使用方法吧！（目前iOS 8中的Safari也已支持該功能啦！）

簡介

srcset 屬性是由W3C旗下的「響應式圖片社區」首先提出的，目的是旨在為使用不同解析度的不同瀏覽器用戶提供適合其瀏覽環境的圖片大小的解決方案

代碼

一般來說，我們只需要將 srcset 屬性加入圖片的 img 即可：

當然，你也可以同時加入 3x 甚至 4x 等的圖片：

PS：「暢想資源」已完美使用「WP Retina 2x」等實用外掛添加2x版本，現在所有Retina熒幕使用者均可以看到高清的圖片、表情等！

預覽

在下圖中如果顯示 1x ，則說明你的系統並不需要高清支援或你的瀏覽器並不支持該屬性，而如果顯示 2x ，則說明你的瀏覽器是需要高清支援，而你的瀏覽器也支持該屬性！