响应式图片101(八):CSS图片

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

大多数时候谈到响应式图片,人们指的是内联图片,而不是CSS图片。

这是因为在<picture>srcset之前内联响应式图片还没有好的解决方案。但遇到CSS图片时,我们可以使用媒体查询,那还有什么可担心呢?

现在是时候回顾响应式CSS图片并基于我们已经学过的内联图片寻找解决方案。

分辨率切换的解决方案image-set()

与我们正在研究的内联图片一样,首先需要考虑的问题是当前的情况是分辨率切换还是艺术指导

对于分辨率切换来说,我们需要尽可能给浏览器提供选择并让浏览器选择可能最佳的图片。浏览器基于用户配置,网站环境等因素能够知道哪张图片可能最适合。

要给浏览器提供选项,我们应该使用image-set()语法

image set

你也许会注意到image-set()srcset之间的一些联系。事实上,srcset是仿照image-set()的。

background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);

srcset类似,image-set的值包含逗号分隔的图片URL列表以及屏幕分辨率描述符。如果没有提供屏幕分辨率描述符,默认为1倍。

然而image-set()仍不支持宽度描述符。计划是改善image-set()来提供与srcset等价的特性。

虽然你看到大部分image-set()例子都是用在background-image上,它其实可以用在任何可以使用图片的CSS属性上。

image-set():被遗忘的响应式图片标准

image-set()是第一代响应式图片规范语法,正如本文所提到的那样,它是srcset的基础。

然而,因为普遍使用媒体查询解决CSS响应式图片问题,image-set()几乎被所有人忽视了。响应式图片研究小组没有花很多时间来讨论它。浏览器没有优先支持它。

<picture>srcset的标准几乎完成后,我们环顾四周意识到需要重新协商image-set(),于是我们已经开始增强image-set()的功能并把它嵌入srcset

众所周知,虽然image-set()是第一个响应式图片标准,但是它依然缺乏浏览器支持。在Chrome,Opera和Safari中添加webkit前缀可用。Firefox和Microsoft都还没有支持。

那么为什么我们要在响应式图片101系列里提到呢?

因为image-set()是分辨率切换的正确解决方案。当image-set()被广泛支持时,面对分辨率切换的情况我们应当使用它而不是带媒体属性的<picture>元素,原因与使用带媒体属性的<picture>相同。

直到image-set()被广泛支持前,你还是会使用CSS艺术指导方案来解决分辨率切换。

艺术指导

艺术指导的CSS解决方案是什么呢?媒体查询。

这很简单,事实上我假定你已经对媒体查询有所了解因此没有提供语法样例。

但是请听我说,请确保图片的媒体查询没有重叠否则会导致重复下载图片。如果有任何疑问,查看Tim Kadlec的媒体查询和资源下载结果

分辨率媒体查询

如果你想在高分辨率屏幕下支持艺术指导,那肯定想用分辨率媒体查询。

image set

分辨率媒体查询让你可以针对满足定义分辨率的设备屏幕添加特定CSS规则。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)    {/* High density stuff here */}

(非常感谢CSS Tricks提供语法样例。)

上述语法中你首先会注意到的是我们加入了包含-webkit前缀的媒体查询。这是为了支持老device-pixel-ratio语法的机器。只有一台机器支持这个带-webkit前缀的语法所以只列出了一台。

更近一步的语法是分辨率媒体查询。在我们的例子中,我们用了最小分辨率,但是正如你猜到的那样,当然有最大分辨率这个功能可以使用。

分辨率媒体查询可以检查以下三种情况:

  • dpi:点每英尺
  • dpcm:点每厘米
  • dppx:点每像素

前两个单位很直观,对于dppx我有写疑惑。Mozilla网络开发文档这样定义dppx

这个单位代表每像素单位上点的数目。因为CSS中inpx的比例固定为1:961dppx等于96dpi,这与CSS中由图片分辨率定义的默认图片分辨率显示有关。

有一点疑惑?刚开始看到我也是这样。

我是这样想的,1x,2x,3x等都基于不明确的定义。一些设备上1倍的值与其它设备不同因为一些设备的分辨率是72dpi96dpi以及其它。

然而从CSS的角度看,这些差异无关紧要。CSS工作组决定了CSS中inpx的比例固定为1:96

因此,虽然72dpi96dpi的博弈导致1倍的定义不明确,1ppx是大家都认同的“1倍”。

你也许会问,1倍为什么对于srcsetimage-set那么重要,对于最小分辨率来说,还有必要使用dppx吗?

我不知道。我只知道你可以把1dppx当做1倍,2dppx当做2倍,以此类推。在这一点上,我刚刚才接受了这个差异并决定继续向前看。我推荐你也这么做。;-)

来到最难的部分

信不信由你,响应式图片的语法其实是简单的部分。在下一节里,我们将讨论选择图片断点的巨大挑战。

上一篇下一篇

本文根据@Jason Grigsby的《Responsive Images 101, Part 8: CSS Images》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.cloudfour.com/responsive-images-101-part-8-css-images/

Blueed

现居上海。正在学习前端的道路上,欢迎交流。个人博客:Blueed.me,微博:@Ivan_z3

如需转载,烦请注明出处:http://www.w3cplus.com/responsive/responsive-images-101-part-8-css-images.html

如需转载,烦请注明出处:https://www.w3cplus.com/responsive/responsive-images-101-part-8-css-images.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部