网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 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-cn/html5-srcset/

本文章由“超级efly”于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. 地板
    快乐淘 China Mozilla Firefox Windows

    好文章,不错喔!!!

    [回复]
  8. 板凳
    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