(译)响应式图片— srcset 和 sizes 属性

alogy 发布于2019-08-01 15:04 / 2438人阅读

摘要：在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。元素展示了很多改变这个局面的希望，但无论元素是否可以完全使用，现在有两个对于响应式图片很关键的两个属性和。

在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。直到最近，根据不同的屏幕尺寸和像素密度来提供不同的图片还是没有完全实现。

元素展示了很多改变这个局面的希望，但无论picture元素是否可以完全使用，现在有两个对于响应式图片很关键的两个属性 —— srcset 和 sizes。

srcset属性

srcset属性允许我们可以提供一系列也许可以被浏览器使用的图片资源。我们提供一个以逗号为分割的图片list，user agent会根据设备特性来决定哪一张图片来显示在网页上。

当listing图片时，我们提供每张图片两个信息 ——

图片文件的_路径_

图片文件的_宽度_或者_像素密度_
为了定义_像素密度_，我们添加一个x来表示图片的密度数值。举个栗子 —-

在图片 src 中定义的默认为图片的 1x 。

在2012年srcset属性第一次提出时，我们只能提供不同的像素密度的图片，就像上面例子中显示的。然而，在2014年新添加了width属性，它可以使我们根据不同的宽度来提供不同的图片。

为了指定图片的宽度，我们添加一个w来表示图片的像素宽度。举个栗子 —-

只有在srcset中使用了宽度，我们才能随之设置sizes属性。

sizes属性

sizes属性明确定义了图片在不同的media conditions下应该显示的尺寸。

Media Conditions

Media Conditions不是确切的媒体查询。它是一部分的媒体查询。他不允许我们明确定义媒体类型，比如 screen或者 print，但是允许我们经常使用的媒体查询。

可以使用的有 —-

A plain media condition 比如(min-width: 900px)

A “not” media condition 比如( not (orientation: landscape) )

An “and” media condition 比如(orientation: landscape) and (min-width: 900px)

An “or” media condition 比如( (orientation: portrait) or (max-width: 500px) )

width

width可以使用任意的长度单位，比如：em, rem, pixels, 和 viewport width。

然而，百分比单位是不允许的，如果需要使用相对单位，vw是推荐使用的。

合体

把Media Conditions 和 width 合在一起 —-

浏览器支持

对于不支持这个属性的浏览器，只是加载src里的图片资源。

译自：Responsive Images - The srcset and sizes Attributes

云服务器 GPU云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49748.html

(译)响应式图片— srcset 和 sizes 属性

摘要：在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。元素展示了很多改变这个局面的希望，但无论元素是否可以完全使用，现在有两个对于响应式图片很关键的两个属性和。在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。直到最近，根据不同的屏幕尺寸和像素密度来提供不同的图片还是没有完全实现。元素展示了很多改变这个局面的希望，但无论picture元素是否可以完全使用，现在有两个...

stefanieliang 2019-08-30 12:46 评论0 收藏0
[译]如何构建自己的Progressive Image Loader

摘要：最后，我们必须调用函数来检查所有的渐进式图片容器在首次运行时是否在页面上可见。我们还必须在滚动页面或调整浏览器大小时调用函数，在一些旧的浏览器主要指可以非常迅速地对这些事件作出回应，所以我们需要限制回调，以确保它不能在毫秒内被再一次调用。你可以在Facebook和Medium上遇到过渐进式图片，当页面滚动到视图时，模糊的低分辨率图像会被清晰的全分辨率版本替换。 showImg(htt...

cartoon 2019-08-29 12:14 评论0 收藏0
老生常谈之响应式开发

摘要：什么是响应式设计作为一名合格的前端开发攻城狮工程师，做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢这个时候响应式开发就应运而生了。五标签的属性除了响应式图像，标签还可以用来选择不同格式的图像。什么是响应式设计？作为一名合格的前端开发攻城狮（工程师），做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢？这...

csRyan 2019-08-30 11:10 评论0 收藏0