为不同的屏幕尺寸提供不同的图片

发布日期:2015-08-01 14:27:15
   我们可以让图片完美缩放,而且也知道了如何限制特定图片的显示尺寸。但在这章的前面我们曾指出图片缩放存在一定的问题。图片尺寸必须比其显示尺寸更大以保证渲染效果,否则的话图片可能看起来很糟糕。基于这个原因,图片文件的体积就永远比实际显示所需的大。
很多人都在研究这个问题,尝试为较小的屏幕尺寸提供较小的图片。第一个著名的例子是 Filament Group的 “响应式图片” 。不过最近,我已经转而使用 Matt Wilcox 的“自适应图片”了。Filament Group的解决方案需要对图片标签做一定修改。Matt Wilcox的解决方案则不需要,而且他的方案会根据标签中已经设定的全尺寸图片自动创建各种尺寸的图片。这种解决方案允许基于一组屏幕尺寸断点,根据用户需要为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。
设置自适应图片
实现 Adaptive Images解决方案需要 Apache 2、PHP 5.x和 GD库,也就是说需要 Web服务器端编程。首先,在其网站上下载.zip文件开始配置:解压文件, 然后将其中的 adaptive-images.php 和 .htaccess 文件拷贝到网站的根目录。如果你网站的根目录下已经有一个 .htaccess 文件了,不要覆盖它。参考下载包中的 instructions.htm 文件看看怎么做合适。
接着在网站根目录下创建一个名为 ai-cache的文件夹。
用你最喜欢的FTP客户端软件设置该文件夹的权限为 777 。
然后把如下 JavaScript代码复制到每个需要自适应图片的网页的头部:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+';
path=/';/script>
如果你没有使用 HTML5(在下一章会改用 HTML5) ,想让页面通过标准验证,则需要追加 type属性。所以 script标签应如下所示:
<script type="text/javascript">document.cookie='resolution='+Math.maxscreen.width,
screen.height)+'; path=/';</script>
切记这段 JavaScript 代码要放在页面头部(最好作为第一个脚本) ,因为它需要在页面加载完成之前,而且要在发出图片请求之前运行。下面是我们的示例网站头部加入该脚本后的结果:
<!DOCTYPE html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>北京网站建设-梦创义科技</title>
<script type="text/javascript">document.cookie='resolution='+Math.
max(screen.width,screen.height)+'; path=/';</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
相关文章:
弹性图片,让图片随视口缩放

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计