响应式图像技术与资源分享.docx

响应式图像技术与资源分享摘要：Jake Rocheleau是一名狂热的Web设计师及社交媒体企业家。他经常研究数字化设计和新时代互联网思想的最新趋势。在响应式的网站设计中，很重要的一个 部分就是图片的响应式设计，在这篇文章中Rocheleau分享了移动Web在处理图片时需要用的一些技术，使用它们能够帮助你快速的生成支持响应式设计 的图片。 近年来，随着智能设备的普及，响应式Web设计可谓风头正茂，Web开发者的追捧，各种资源的报道，相信您对其并不陌生。响应式的图像是使 用HTML的IMG标签传送的图片，可以根据不同的屏幕大小而改变图片来源。在响应式的网站设计中，很重要的一个部分就是图片的响应式设计，在这篇文章中 我们将探讨移动Web在处理图片时需要用到哪些技术，使用它们能够帮助你快速的生成支持响应式设计的图片。图像的位置和样式利用CSS3属性来创建图像或许是个不错的想法，它能帮助你在富媒体页面上脱颖而出，你可以根据页面的布局来随意调整大小。当用户调整浏览器窗口时，你应该思考如何将图片进行堆叠。HTML元素的位置将决定布局位置是否能够自由缩放。支持Retina（视网膜）图像响应式媒体另一方面也适用于移动retina设备。有些常用的图像会在设备上出现更加密集的像素。那么我们该如何解决呢？最好的办法就是将图片设置 为较大的尺寸，最好设置成正常大小的两倍。因此，如果你的logo是200150 ，那么你应该创建的图像为400300。依此类推。如果你的读者使用的是retina显示屏，那他就不会错过任何一个先进的样式。就我个人而言，我比较喜欢JavaScript库，这里推荐使用retina.js的2x图像。这里需要注意的是，当页面加载Retina.js时，检查当前的设备是否支持像素密度大于1x，是否所有的 src属性被替换为典型的Apple-style 2x（比如，pear.png变成pear2x.png）。自然更改CSS图像大小在默认的情况下，如果你的图像没有按照设固定的宽度或高度进行设置，这时图片会折叠页面内容。但是响应式图片并不能有效的使用自定义的宽度/高度。这里有个不错的方法可以帮助你解决此问题。将下面的代码max-width添加到样式列表中1. imgdisplay:block;border:0;max-width:100%;问题是当我们给宽度添加自定义的宽度/高度属性时，其高度依然保持不变。因此，图像可以拉伸和缩放但不能垂直下拉。你可以在CSS中添加height: auto;请注意，这个方法不适用于JavaScript或是外部第三方资源。我已经在大部分响应式Web项目中试用过，在Firefox，Chrome、Internet Explorer中没有发现任何Bug。开源替代方案这是一款有趣的解决方案被称之为Adaptive图像，基于HTML和CSS代码创建而来。你可以在PHP后端添加一行JavaScript代码。这将有助于将图片生成动态缓存状态，能够完美的适配用户浏览器窗口大小。在服务器资源占用问题上。对于用户来说调整较大图片的大小比利用脚本自动缩放要容易的多。但是缓存系统并不是那么简单，因此，当页面发出请求时最好不要运行新的操作系统。你只需要填写几个PHP变量内的Adaptive-Images文件，并检查该网站有关安装脚本的详细信息即可。当然，你也可以利用jQuery的一款插件HiSRC，该项目托管在Github上。你只需下载源代码并