Bootstrap优化站点资源、响应式图片、传送带使用(2)

【Bootstrap】2.作品展示站点的个人作品网站中,传送带中图片是为全宽布局设计的,宽度时 1600px,大小为 135~189 KB。把这么大的图片发送到手机和非视网膜屏的平板中就过分了。在移动优先响应式设计的时代,这样做又是不负责任的。

而且,如果再看一看小屏幕中的显示效果,你可能会发现传送带中的图片应该更高点、窄点才好,因为窄屏幕垂直方向向上空间相对富余一些。

在手机屏幕那么宽的视口中,我们的图片,为大屏幕准备的图片,是可以显示,但如果能够更多利用垂直空间,效果会更好。这一点通过下面的屏幕截图可以看出来:

Bootstrap优化站点资源、响应式图片、传送带使用

好的响应式图片技术,应该能让我们为小屏幕提供适当的图片,满足小文件、快速加载,以及改进设计的要求。

B.2 选择方案

本书作者推荐的是 Picturefill 技术。Picturefill 方案较好地平衡了性能和设计问题,而且方案也相当简单。

PS:相关文章:https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/(这篇文章比较早了,建议还是直接看官方文档

Picturefill 实现想饮食图片只需简单几步:

(1) 准备好针对目标视口的理想图片;

(2)下载并包含 Picturefill 的 JavaScript 文件;

(3) 用 Picturefill 的标记模式来引入图片。

一如往常,实际开发过程还有两个步骤:

□ 测试;

□ 按需调整。

下面我们就一步一步来做。

B.2.1 准备响应式图片

此书的源码中已经准备好了特殊尺寸和经过优化的图片,方便起见,我们把它们直接拷贝到我们的 img文件夹下:

Bootstrap优化站点资源、响应式图片、传送带使用

打开这个图片,会发现它们更窄一些,长宽比更小。这是为了像下面这样在窄视口中更多利用垂直空间:

Bootstrap优化站点资源、响应式图片、传送带使用

当然,图片也小一些,900px × 600px,保证在视网膜屏中也能有足够的像素,但比起初的1600px × 800px 就小多了.。这些小图片平均都比原来的大图片小50%以上。

Bootstrap优化站点资源、响应式图片、传送带使用

图片准备好以后,接下来该 JavaScript 上场了。

B.2.2 使用 JavaScript

Picturefill 的文件及文档位于 GitHub,地址是:https://github.com/scottjehl/picturefill

大家可以花点时间看看文档。我们一会就要用到文档中推荐的元素。我们要先下载该文件,解压缩后,找到 picturefill.min.js,然后把它复制到 plugins.js 文件中。

接下来,按照 Picturefill的约定准备标记。

B.2.3 修改标记结构

在 html 文档中,修改每张图片的标记,使用 Picturefill 的 picture 元素的模式。这里的标记默认采用小图片,但视口在 640px 及以上的浏览器和IE8例外。

一下就是修改后第一张图片的标记。

<picture> <source srcset="img/okwu.jpg" media="(min-width:640px)" /> <img srcset="img/okwu-sm.jpg" alt="OKWU.edu Homepage" /> </picture>

然后依次修改剩余的图片标记就可以了。

B.2.4 测试与调整

保存并测试,你会发现这一次传送带的图片不会调整适应屏幕宽度了。这是因为 Picturefill的标记没有使用 Bootstrap 传送带样式中的选择符。

我们的修改 _carousel.less 文件中相应的选择符,好让图片撑满可用空间,步骤如下:

(1) 打开 _carousel.less

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdszg.html