Adaptive Images的使用：为不同的屏幕尺寸提供不同的图片
尉迟清野
1.安装PHP和Apache,在Apache Server中的www目录中新建一个网站的目录：myweb
2.在[url]http://www.adaptive-images.com/[/url]上，下载zip文件，如：adaptive-images.1.5.2.zip，
然后解压文件，将其中的.htaccess和adaptive-images.php拷贝到myweb中（如果已存在的web站点的目录中已经存在.htaccess了，不要覆盖它了；此时是新建的myweb目录其中是没有这2个文件的），然后在myweb中创建一个ai-cache文件夹（其中存放后面使用手机访问时按照屏幕尺寸断点命名的文件夹）。
3.将如下JS脚本复制到每个需要自适应图片的网页的头部：
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
4.修改.htaccess，让myweb中test中图片被缩放：
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !ignore-this-directory
# RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too
RewriteCond %{REQUEST_URI} !assets
[color=red][b]RewriteCond %{REQUEST_URI} test[/b][/color]
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images -------------------------------------------------------------------------------
</IfModule>
4.测试页面：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<!-- The Adaptive Images JavaScript -->
[color=red][b]<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>[/b][/color]
</head>
<body>
<div id="example">
<h2>Example in action</h2>
<div class="gallery">
<div class="image_main">
<img src="/myweb/test/creepy.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
以上内容的如图所示：
[img]http://dl2.iteye.com/upload/attachment/0090/2932/21097abc-b54f-31dc-bfa2-2d1d5352c9c9.png[/img]
test中图片creepy.jpg：
[img]http://dl2.iteye.com/upload/attachment/0090/2545/b197c2b2-f2d1-3959-972f-0279a0b9442b.jpg[/img]
5.启动Apache，本地访问：[color=red][b][url]http://localhost/myweb/test.html[/url][/b][/color]，查看页面访问是否正常。
[img]http://dl2.iteye.com/upload/attachment/0090/2547/c985a1d0-31b5-35f0-90de-a7aa1956d2be.png[/img]
6.启动本地Android模拟器，通过访问[color=red][b][url]http://10.0.2.2/myweb/test.html[/url][/b][/color]，测试自适应图片的呈现。
[img]http://dl2.iteye.com/upload/attachment/0090/2549/97128ff1-006d-311b-a935-6c7b99c35049.png[/img]
2.在[url]http://www.adaptive-images.com/[/url]上，下载zip文件，如：adaptive-images.1.5.2.zip，
然后解压文件，将其中的.htaccess和adaptive-images.php拷贝到myweb中（如果已存在的web站点的目录中已经存在.htaccess了，不要覆盖它了；此时是新建的myweb目录其中是没有这2个文件的），然后在myweb中创建一个ai-cache文件夹（其中存放后面使用手机访问时按照屏幕尺寸断点命名的文件夹）。
3.将如下JS脚本复制到每个需要自适应图片的网页的头部：
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
4.修改.htaccess，让myweb中test中图片被缩放：
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !ignore-this-directory
# RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too
RewriteCond %{REQUEST_URI} !assets
[color=red][b]RewriteCond %{REQUEST_URI} test[/b][/color]
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images -------------------------------------------------------------------------------
</IfModule>
4.测试页面：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<!-- The Adaptive Images JavaScript -->
[color=red][b]<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>[/b][/color]
</head>
<body>
<div id="example">
<h2>Example in action</h2>
<div class="gallery">
<div class="image_main">
<img src="/myweb/test/creepy.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
以上内容的如图所示：
[img]http://dl2.iteye.com/upload/attachment/0090/2932/21097abc-b54f-31dc-bfa2-2d1d5352c9c9.png[/img]
test中图片creepy.jpg：
[img]http://dl2.iteye.com/upload/attachment/0090/2545/b197c2b2-f2d1-3959-972f-0279a0b9442b.jpg[/img]
5.启动Apache，本地访问：[color=red][b][url]http://localhost/myweb/test.html[/url][/b][/color]，查看页面访问是否正常。
[img]http://dl2.iteye.com/upload/attachment/0090/2547/c985a1d0-31b5-35f0-90de-a7aa1956d2be.png[/img]
6.启动本地Android模拟器，通过访问[color=red][b][url]http://10.0.2.2/myweb/test.html[/url][/b][/color]，测试自适应图片的呈现。
[img]http://dl2.iteye.com/upload/attachment/0090/2549/97128ff1-006d-311b-a935-6c7b99c35049.png[/img]
类似资料：