網站最後更新日期:2020年12月20日
歡迎大家來到暢想資源 AREFLY.COM! 個人網站 更多聯絡方式
×

HTML5之實用新屬性 srcset 簡介&教學

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

簡介

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

代碼

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

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

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

預覽

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

html5-srcset-1x

覺得這篇文章有用嗎?分享一下讓更多人受益吧!

© 版權聲明:本文章採用「姓名標示-非商業性-相同方式分享 4.0 國際(CC BY-NC-SA 4.0)」於「」發布,轉載時須以相同方式發布並註明「原文鏈接」!

本文固定鏈接:https://www.arefly.com/zh-tw/html5-srcset/

本文章由「超級efly」於2014年11月21日發表於「網路」分類

你可以發表評論,並在保留原文地址及作者的情況下引用到你的網站

轉載請註明:HTML5之實用新屬性 srcset 簡介&教學 | 暢想資源

關鍵字:, , , ,

如果您對本文有任何疑問或建議,歡迎發送郵件至yifei@hesyifei.com(或通過其它途徑)聯繫我們,謝謝!