《响应式Web图形设计》一13.4 多图像解决方案

简介:

本节书摘来异步社区《响应式Web图形设计》一书中的第13章,第13.4节,作者: 【美】Christopher Schmitt 译者: 曾斌 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

13.4 多图像解决方案

响应式Web图形设计
如果你想对图像质量有更多把握,同时还可以不拘泥于一种图像格式,那么是时候该考虑下picture元素和srcset属性了。

13.4.1 picture元素

picture元素(见图13.17)是响应式图像社区(网址是http://picture.responsiveimages.org/)提出的新元素,旨在帮助网页设计师在用户可见的内容中指定合适的图像。


17

如果用户使用一个高清分辨率的大屏幕来访问网站,那么我们可以为之提供高清大图。


q2


如果用户使用常规小屏幕上网,那么我们可以指定一张小一点的图像来取代超大的高清图像。


q3


如果浏览器无法解析picture元素,那么原有的img元素将作为后退选项。

q4

13.4.2 srcset属性

针对自适应图像的另一种解决方式(见图13.18)是采用srcset属性(网址是http://dev.w3.org/
html5/srcset/)。这一属性是img元素的延伸,主要针对浏览器窗口宽度和屏幕密度来采用合适的图像。


q5


这一属性有多种取值。每个值都带有指向图像的URL地址,同时列有视口尺寸,也可以加上屏幕密度。


18


提出一种全新的响应式图像格式

为了避免在响应式Web设计中无时无刻不在解决的光栅图像问题,我们需要一种本质上为数据锁的图像格式。

例如,非常流行的MP3音频文件格式实际上是将一系列元数据信息存储在一个音频标签里。通过这个音频标签,iTunes可以找到类似于歌曲名称、艺术家、专辑名称、年份等的信息,如图13.19所示。

我们需要类似的图像格式,不是为图像捕获元信息,而是存储图像的不同版本。

一个“图像”文件能够存储不同版本的图像:缩略图、适用于手机移动端的图像、用于桌面计算机的图像、适用于Retina屏幕的图像和便于打印的图像等。浏览器可以将网页的浏览环境发送给服务器端,然后请求从该图像的存储单元中找到分辨率合适的图像版本。


19


例如pizza-phone-HD.jpeg 480w 2x。其中,480w意味着浏览器窗口宽度最大为480 px(单位只能是px)。

值中的2x将CSS定义的1 px设置为2个设备物理像素,这意味着是高密度屏。

因此整体来说,这意味着如果浏览器宽度小于481 px,并且屏幕为高密度屏,则使用pizza-phone-HD.jpeg图像。

方法不止一种

还有别的方法可以为响应式Web设计提供合适的图像,例如使用服务器端算法使该过程自动化。具体参见Chris Coyier的博客文章“你该使用哪一种方法实现响应式图像?”(http://css-tricks.com/which-responsive-images-solution-should-you-use/)。

13.4.3 使用图像补丁脚本

picture和srcset的问题在于它们尚处于提议阶段,本书写作期间还没有被任何浏览器支持。

网页开发人员Scott Jehl编写了一个补丁,叫作picturefill,如图13.20所示,从而使使用picture和srcset成为了可能。现在我们就可以使用picturefill在屏幕中以合适的宽度呈现适当的图像。


20


Retina屏幕(iPad)选择不同的显示图像

使用Scott Jehl的picturefill的10个步骤如下所示。

① 访问picturefill polyfill的脚本地址:http://github.com/scottjehl/picturefill并下载代码。


q6


② 把picturefill.js复制到文件目录下,并将该脚本在文档头部引入。


q7


③ 把同位于zip下载文件中的matchmedia.js 引入文档头部。这一段JavaScript脚本用于侦测浏览器是否支持媒体查询,但目前尚无标准接口来实现这一功能。


q7


④ 将img元素设置为使用适合移动设备的较小的图像。


q8


⑤ 由于picturefill是JavaScript驱动的,所以我们需要确保用户浏览器中的JavaScript可用。将作为平稳回退的图像使用noscript标签包裹起来,保证在JavaScript可用的时候该图像不可见。


q9

⑥ 将noscript和img元素使用div元素包裹起来。给data-picture、data-alt和title分配属性值。data-alt值替代常规alt值,供屏幕阅读器使用。如果你希望鼠标悬浮在图像上时有小提示的话,请给title属性设置一个值。


q9


⑦ 由于img元素被包裹在noscript元素里隐藏了起来,请使用一张适合手机用户的图像替换基础图像,并用带有data-srcset属性的div元素包裹起来。如果浏览器是高分辨率屏,便会展示大图像。


q10

⑧ 使用另一个div元素,设置另一个尺寸更大的图像的源地址。模拟媒体查询,设置显示尺寸更大的图像的最小屏幕宽度。在这个例子中,最小宽度是25em;只有超过了最小宽度,才会显示下一级宽度更大的图像。如果显示器是高清的,将URL指向一张高清图像。


q11


⑨ 继续通过data-media属性添加浏览器宽度分界点,通过data-srcset添加其他图像地址,直到全部设置完毕。


q12


281.tif

相关文章
|
14天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
1月前
Could not open ServletContext resource [/WEB-INF/springmvc-servlet.xml]【解决方案】
Could not open ServletContext resource [/WEB-INF/springmvc-servlet.xml]【解决方案】
14 0
|
19天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
16 0
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
1月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox的力量
【2月更文挑战第22天】 在当今多变的互联网景观中,创建一个能够适应不同屏幕尺寸和设备类型的响应式Web界面已成为前端开发者的核心任务。本文将深入探讨Flexbox——一个强大的CSS布局模式,它为构建灵活且易于管理的响应式设计提供了坚实的基础。通过详细解读Flexbox的关键特性及其在实际项目中的应用,我们将揭示如何有效地使用这一工具来提升用户界面的质量和性能。