如何在响应式网页中安置图片及视频

优设2017-08-17

响应式网页设计，是一种正在流行的网页开发思想，它是利用灵活可变的栅格系统，令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应。预计2015年的时候，移动端的用户数量将会从目前的8亿，增长到19亿，而这也意味着目前我们为桌面浏览器而设计的网页，将会在他们的手机和平板上呈现出非常糟糕的使用体验。

但是随着实际应用状况的改变，响应式网页设计还是会出现一系列复杂的并发症。本文余下的部分，就是详细阐述如何在响应式网页中安置和处理多媒体元素，诸如图片和视频，最终的目的是帮你做出一个靠谱的网站，能让这些元素无缝地在各种手持设备上加载运行，提升用户体验。

响应式网页设计中的图片处理

先说说响应式图片的处理方法。在响应式网页设计中，图片处理的问题或多或少地和传统网页中的导航栏设计有相似之处。随着新的移动设备的普及，更高像素密度的屏幕使得网页的任何一个瑕疵都显得无比明显，因此，图片处理的核心问题在于如何确保网站（尤其是图片）的各个方面都能尽可能灵活，并且确保每个像素不会在高分屏下模糊。

图片显示的问题

首先，当网页对设备响应时，并不存特定的图片发布标准。并且针对这一问题，有大量的可选方案供你选择。不过，这个时候，问题出现了：3G模式下，在视网膜屏幕下的移动设备上图像应该如何处理。在网速较差的情况下，图片的尺寸大小是否应该自动优化（降低）？这就是所谓“美术设计”的问题。网站提供的图片在不同屏幕的设备上都能够显示，还是远远不够的。小屏幕设备的用户可能完全看不清图片的细节，那么，就应该在“能正常显示”的基础上，为这块小屏幕单独裁剪一个版本，让用户看清细节。

有人提出，开发者应该将所有不同尺寸大小比例的图片都预先上传到网站页面中，并且设置好CSS与媒体查询功能，将过大或过小的图片都隐藏起来，让浏览器就下载像素完全匹配的图像。然而，实际状况并非如此，浏览器在加载CSS类之前，就已经将所有的相关图片都下载下来，这使得网页更加臃肿，加载时间更长。

图片问题可能的解决方案

在继续探讨之前，先明确一点：让每块屏幕都完美显示图片的解决方案是不存在的。可是我们能够不断探索可行性更高的方案，尽可能地提高精度，以下是我们为响应式网页的图像问题，找到的可能的解决方案：

Bootstrap

如果你开始设计一个响应式网站，但是对于如何操作毫无头绪，那么你应该试试BootStrap的CSS框架。借助Bootstrap，你可以很容易达成目标。更重要的是，Bootstrap提供的样式以及在基础的HTML元素上扩展出的类，将会使得图片的响应更容易实现。

Focal Point

Focal Point是一个框架，可以帮助你“种植”图片并且控制焦点。这项技术仅仅使用了CSS，开发者仅仅需要向对应标签中添加含有目标图片的类就可以了。

CSS Sprites

如果加载时间是你需要考虑的首要因素的话（它应该是），那么你可以选择CSS 精灵，尤其当你需要适配带有视网膜屏幕的设备之时。当你为高分辨率屏幕适配网页的时候（比如苹果的Retina屏幕），一般会添加更大尺寸的图片资源，并且使用CSS中的Media Query来识别并适配尺寸。但是如此一来，文件数量和大小会急剧增加，并且会增加代码中的CSS选择器的数量，引用更多的文件。

如果使用CSS 精灵的话，这种情况会得以改善。你可以将网页所需要的图片都包含到一张大图中供选择器来引用。仅仅需要一个http请求，你就可以将多个图片素材获取到本地。通过<img />标签引用的照片类素材并不适宜于用CSS精灵来处理，但是你在header和footer中使用的图标素材和按钮样式之类的东西会在CSS精灵的加持下，好用很多。

自适应博客

自适应图片的解决方案可以通过检测设备的屏幕尺寸，为html嵌入符合屏幕尺寸需求的图片资源。这种方案是一个典型的服务器端解决方案，它需要在被本地运行Javascript来检测，但它最主要还是依靠Apache2 网络服务器，PHP 5.x以及GD库。

自适应图片的方案最赞的地方在于你不需要改变标记。有人认为基于标记的解决方案是最好的，但是事实并非如此。对于Wordpress这样的内容管理系统，自适应图片的解决方案与之结合起来会方便很多。

如果想让你的网站能图片自适应，那么你需要在服务器端修改或者增加.htaccess文件。此外，你还需要在你的网站服务器的根目录下增加一个PHP文件，并且在网站页面中增加JavaScript代码。当你做好这一切之后，PHP脚本会获取对于图片的任何需求，并且会根据需求所指定的断点调整好尺寸输出网页。

在Wordpress网站中输出响应式图片的插件

在Wordpress站点中，还有其他通过插件来实现响应式图片的解决方案。以下插件与 <picture> 标签的作用相同：

-PB Responsive Image

-WP Responsive Image

-Simple Responsive Image

-Picture Fill WP

此外，网上还有很多响应式的Wordpress主题可供用户选择。

处理图片的终极方案？

再强调一次，请千万记住，所有的这些处理图片的可行性方案都有其局限性。比如自适应图片的方案，它需要Apache和PHP的结合，因此它用于内容管理还好，但是不大可能完美适配于网站平台或者主机服务器上。此外，自适应图片有赖于服务器通过.htaccess文件获取图片尺寸的需求，这也就意味着，获取的图片不在自己的服务器上，.htaccess中的脚本就无能为力了。此外，这个脚本还无法检测带宽，如果你拿着3G版iPad Air访问这类网站的话，加载速度可能会惨不忍睹。最重要的是，它并没有解决上述的“美术设计”的问题，它仅仅只是调整了原有图片的尺寸而已。所以，对于这一切，你需要通过试验找出最合适的方案。

响应式网页设计中的视频处理

毫无疑问，对于网站而言视频是极其重要的营销工具。因此，对于富有弹性的响应式视频的需求越来越多。

就像图片一样，让图片灵活地适配网页也是个头疼的事情。这并不关乎视频播放器的尺寸，但即使是播放按钮这样的的基础网页元素，也都需要针对千奇百怪的设备来适配和优化。以下提供几个解决方案：

为Wordpress中的视频优化

虽然wordpress提供了诸多响应式的主题，但是一般情况下，这些内嵌视频并不会根据屏幕尺寸自行适配。这也是为何它们所在的网页可能会出现拉伸，或者不对称的情况。FitVids这一插件完美的解决了这个问题。这是一个jQuery插件，它能让视频针对屏幕尺寸自行适配。激活插件之后，Wordpress会在发布视频内容时，向CSS选择器中自动添加“.post”类。保存修改，你可以尝试在不同尺寸的设备中观察网页的布局，感受视频播放的体验，看看它是怎么工作的。

此外，还有更多可选的Wordpress插件：

-Fluid Video Embeds

-Video Overlayer

-MarcTV Video Embed

-Responsive Video

从其他网站中手动嵌入视频

YouTube以及其他类似的视频托管网站通常以像素为单位固定宽度和高度，并且嵌入到代码中。对于普通网站，这并没有什么不妥，但是对于响应式网页，这样的视频是不合用的。这些使用了内置页框和对象标签的视频网站代码，用HTML5的视频元素来处理是不可能的。简单的说，HTML5的标签搞不定来自Youtube和Vimeo的嵌入视频。

这个时候，CSS再次派上了用场。具体来说，即使容器元素按比例缩小，你可又可以保持视频的内在比例。这种技术可以帮助你讲youtube、Vimeo和SlideShare等流媒体网站的视频嵌入到网页中并自然地显示。你所要做的，是使用<div>容器来嵌入代码，并指定子元素的绝对位置，这会使得嵌入的视频根据屏幕宽度自动扩展。

值得注意的是，剥离出视频并且按照尺寸比例封装到Div的过程并不简单，此外，这项技术对于多视频的网站可行性并不高。不过如果你的网站已经设计成响应式的页面，那么这项技术将会在你的网站上完美运行。

案例

接下来是一些实际案例，这些响应式网站针对不同浏览器和屏幕优化了图片和视频：

案例1:BootStrap+jQuery

如何在响应式网页中安置图片及视频,PS<a href=/photoshop/ target=_blank class=infotextkey>教程</a>,

这是一个风格极简的博客/作品集网站，它使用了Bootstrap v2.2.2和jQuery。前者让这个网站可以使用大量的表单、模态、提示、按钮、转盘并且响应式输出，加入jQuery之后网站的流布局能力又得以提升。jQuery可以让网站实现各种不同的显示方式（比如在桌面端浏览器上显示三栏，在平板上显示一栏，在手机屏幕上显示一栏）。

案例2:FitVids

如何在响应式网页中安置图片及视频,PS教程,