網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

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

覺得這篇文章有用麼?分享一下讓更多人知道吧!

爲繼續支持本站繼續寫出優質文章、歡迎捐款!

注:本站同時長期承接WordPress外掛及主題制作、伺服器環境配置等,如需詳情,請「聯系我們」!

© 版權聲明:「暢想資源」之所有文章及資源系采用「創用 CC 姓名標示-非商業性-相同方式分享 3.0 香港 授權條款」發布及共享,轉載時須以相同方式發布並注明「原文鏈接」!

本文固定鏈接:http://www.arefly.com/html5-srcset/

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

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

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

關鍵字:, , , ,

以下是廣告時間,廣告內容僅供參考!

廣告載入中...

HTML5之實用新屬性 srcset 簡介&教學:目前有 20 條留言

訪客以 11:9 暫時領先博主

迴響載入中,請稍等...
  1. 9樓
    Sven Germany Mozilla Firefox Mac OS

    现在可以显示2X了 我也准备搞下这个插件

    [回覆]
  2. 8樓
    wu1yi2fan China Mozilla Firefox Windows

    目前的Retina其实只有苹果全线才用了吧…… :mrgreen:

    [回覆]
  3. 7樓
    风漠兮 China 猎豹浏览器 Windows

    土豪唉

    [回覆]
  4. 6樓
    恋羽 China Google Chrome Windows

    新东西,太多学不过来

    [回覆]
  5. 5樓
    悦听有声 China Google Chrome Windows

    围观一下!

    [回覆]
  6. 4樓
    吴尼玛 China Google Chrome Windows

    我来了

    [回覆]
  7. 3樓
    快乐淘 China Mozilla Firefox Windows

    好文章,不错喔!!!

    [回覆]
  8. 2樓
    Sven China Google Chrome Windows

    1X!!哭电脑太烂了。

    [回覆]
    • :trick: :trick: 其實現在Retina顯示器還是不多的啦 :grin: :grin:

      [回覆]
  9. 沙發
    诸神的黄昏 China Google Chrome Windows

    chrome最新开发版+win8.1=1x

    [回覆]
    • 你的電腦不是Retina熒幕當然是1x啦 :grin:

      [回覆]
      • 差评 :(

        [回覆]
      • wu1yi2fan China Mozilla Firefox Windows

        貌似Windows不支持Retina显示……或者说,对于Retina的显示不好。微软现在Windows用的还是DPI缩放模式……
        换句话,如果用的是Windows,基本上显示的都是1X。 :(

        [回覆]
        • :crazy: :crazy: 對呀...Windows對Retina熒幕的支援實在是差到沒話說... :tired: :tired:

          [回覆]
廣告載入中...

發表迴響



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter