logo
您好! 请登录 注册

常见问题

GO

响应式图像终于有超赞的解决方案了!

发表时间:2017-12-05 11:43:28

关注:182

发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?

固定宽度图像:基于设备像素比选择

视网膜屏幕的广泛应用,使我们不仅需要考虑屏幕分辨率,而且也需要考虑像素密度。视网膜屏幕,4K显示器,UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。

有些图片不管屏幕尺寸,始终以固定宽度显示-如站点logo或人物简介图像,也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。

srcset 属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。 x 描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解 srcset 的浏览器会直接加载 src 属性中声明的图像。

上例中,我们告诉浏览器在viewport宽度小于400像素时,使图像的宽度与viewport等宽。在viewport宽度小于960像素时,使图像的宽度为viewport宽度的75%。当viewport大于960像素时,使图像的宽度为640像素。如果你不熟悉 vw  ,可以看看 Tim Severien的大文 viewport单位详解 。

浏览器利用 srcset sizes 信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素,图像最可能以 75vw 的宽度显示。浏览器将尝试加载第一张大于450像素(600*0.75)的图像,也就是 uswnt-480.jpg 。如果我的是dpr为2的Retina显示屏,那么浏览器就会尝试加载第一张大于900像素(600*0.75*2)的图像,也就是 uswnt-960.jpg。 我们无法确定究竟显示哪张图像,因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译者注:srcset和size列表是对浏览器的一个建议(hint),而非指令。例如,设备像素比(dpr)为1.5的设备,亦可用1x也可用2x的图像,由浏览器根据其能力、网络等因素来决定。)

前两个例子都是以不同质量显示相同的图像,仅用 srcset 属性就足够了。不必担心老旧浏览器,老旧浏览器会把它看作为一个普通的图像并从 src 中加载。如果你想在不同宽度下显示稍微不同的图像,比如在较窄屏幕下仅显示图像的关键部分,那么要使用 picture 元素。

picture:基于Art direction(美术设计)选择

picture 元素就像是图像和其源的容器。浏览器仍然需要 img 元素,用来表明需要加载图片,如果没有 img ,那么什么都不会渲染。 source 为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为:在一个特定的转效点(breakpoint)需要显示一个特定的图像。使用 picture 元素选择图像,不会有歧义。


相关阅读

I NEED TO BUILD WEBSITE

提交您的需求

快速提交您的需求,专业客户经理为您量身定制解决方案

  • 联系人*

  • 联系电话*

  • 需求*

  • 获取方案及报价

MAIL:service@wmcom.cn
地址:广州市天河区谭村路348号马赛国际商务中心1711

MAIL:service@wmcom.cn
地址:广州市天河区谭村路348号马赛国际商务中心1711

微梦科技提供 h5建站 企业网站建设 企业商城建设 小程序定制 网站优化推广 企业邮箱等一站式企业服务。

© 2018 广州微梦信息科技有限公司 All Rights Reserved
粤ICP备14015633号-7

© 2015 广州微梦信息科技有限公司 

All Rights Reserved 粤ICP备14015633号

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
咨询电话
020-29066483
上班时间
9:00 - 23:00
扫一扫二维码
二维码