為其提供不同的圖片。接下來(lái)我們就看一看如何利用該技術(shù)實(shí)現(xiàn)圖片自適應(yīng)。
?
設(shè)置自適應(yīng)圖片
實(shí)現(xiàn) Adaptive Images 解決方案需要 Apache 2、PHP 5.x 和 GD 庫(kù)，也就是說(shuō)需要 Web 服務(wù)器端編程。首先，在其網(wǎng)站上下載.zip 文件開(kāi)始配置：
?
解 壓文件，然后將其中的adaptive-images.php和.htaccess文件拷貝到網(wǎng)站的根目錄。如果你網(wǎng)站的根目錄下已經(jīng)有一 個(gè).htaccess文件了，不要覆蓋它。參考下載包中的instructions.htm文件看看怎么做合適。接著在網(wǎng)站根目錄下創(chuàng)建一個(gè)名為 ai-cache 的文件夾。
?
用你最喜歡的 FTP 客戶端軟件設(shè)置該文件夾的權(quán)限為777。
?
然后把如下 JavaScript 代碼復(fù)制到每個(gè)需要自適應(yīng)圖片的網(wǎng)頁(yè)的頭部：
<script>document.cookie=’resolution=’+Math.max(screen.width,screen.height)+'; path=/';/script>
?
如果你沒(méi)有使用 HTML5（在下一章會(huì)改用 HTML5），想讓頁(yè)面通過(guò)標(biāo)準(zhǔn)驗(yàn)證，則需要追加 type 屬性。所以 script 標(biāo)簽應(yīng)如下所示：
<script type=”text/javascript”>document.cookie=’resolution=’+Math.maxscreen.width, screen.height)+'; path=/';</script>
?
切記這段 JavaScript 代碼要放在頁(yè)面頭部（ 好作為第一個(gè)腳本），因?yàn)樗枰陧?yè)面加載完成之前，而且要在發(fā)出圖片請(qǐng)求之前運(yùn)行。下面是我們的示例網(wǎng)站頭部加入該腳本后的結(jié)果：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />
<title>And the winner isn’t…</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>
?
把背景圖片放在其他地方
過(guò)去，我通常將所有圖片都放在一個(gè)名如 images 或 img 的文件夾中，不論是用做 CSS 背景的圖片，還是通過(guò)標(biāo)簽插入的圖片。但是在使用自適應(yīng)圖片方案時(shí)，建議將那些用于 CSS 的背景圖片（或者那些你不想被縮放的圖片）放在另一個(gè)目錄。自適應(yīng)圖片方案默認(rèn)為此創(chuàng)建的目錄是assets。如果你不想縮放某張圖片，把它丟進(jìn)這個(gè)文件 夾即可。如果你想將這類圖片存在其他（或更多）文件夾中，則需要像下面這樣修改.htaccess文件。
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ——————————————————–
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !bkg
# 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>
?
上面的代碼設(shè)定了存在assets或bkg文件夾中的圖片不會(huì)被縮放。反之，如果你想顯式聲明只允許某個(gè)特定文件夾中的圖片被縮放，那么將設(shè)置規(guī)則中的感 嘆號(hào)去掉即可。例如，如果我只想讓網(wǎng)站根目錄下名為andthewinnerisnt的文件夾中的圖片被縮放，則修改后的代碼如下所示：
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images —————————————————— 2
RewriteCond %{REQUEST_URI} andthewinnerisnt
# 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>
?
這就是要設(shè)置的全部?jī)?nèi)容。檢查是否能正確生成自適應(yīng)圖片的 簡(jiǎn)單辦法，就是在網(wǎng)頁(yè)中插入一張大圖片，然后用手機(jī)訪問(wèn)這個(gè)頁(yè)面。之后用 FTP 軟件檢查ai-cache文件夾中的內(nèi)容，你應(yīng)該可以看到一堆文件，以及使用屏幕尺寸斷點(diǎn)命名的文件夾，如480（如下圖）：
Adaptive Images 方案不僅限于靜態(tài)網(wǎng)站，它也可以被用于內(nèi)容管理系統(tǒng)，而且在 JavaScript 被禁用的情況下依然有效。自適應(yīng)圖片方案給我們提供了一種方法，可以根據(jù)屏幕尺寸提供完全不同的圖片，為那些沒(méi)有必要下載全尺寸大圖的設(shè)備節(jié)省帶寬。
?
原文： http://www.aaini.com/html/1093.html
?
Adaptive Images檢測(cè)訪問(wèn)者屏幕的尺寸，自動(dòng)創(chuàng)建、緩存并重新縮放內(nèi)嵌在HTML頁(yè)面中的圖片，以適應(yīng)顯示設(shè)備屏幕的大小。無(wú)需把變化標(biāo)記出來(lái)。Adaptive Image和流媒體圖片技術(shù)聯(lián)合使用，適用于響應(yīng)式設(shè)計(jì)。
?
Adaptive Images為什么要那樣做？現(xiàn)在越來(lái)愈多的用戶使用屏幕更小、速度更慢和帶寬更低的設(shè)備訪問(wèn)網(wǎng)站。在那樣的設(shè)備上訪問(wèn)以桌面為中心的網(wǎng)站，圖片加載會(huì)越 來(lái)越慢，引起UI延遲，花費(fèi)用戶更多的帶寬和金錢。Adaptive Images就是為了解決上述問(wèn)題。
?
項(xiàng)目地址： http://adaptive-images.com/
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
