與其說是 響應式網頁能作到甚麼，不如說是 最新的 Web 技術能作到甚麼 !

我們都知道目前最新的 Web 技術是基於 HTML5 + CSS3  開發的，用一般文字編輯器就可以開發出一個類似 APP 的介面，其功能之強大，有時候會讓人懷疑未來還需要 APP 幹嘛 !?  當然以目前來說 APP 還是有它的不可取代性。

我們舉出一些目前最新 Web 技術可以達到的功能 :

基本功能

 動態配置區塊

動態配置區塊 又稱作 流動佈局，指的是網頁的區塊 可以隨著目前 瀏覽器寬度 動態改變位置、大小 或者 選擇 隱藏 與 顯示。 動態配置區塊 是響應式網頁能夠同時支援 手機、平板 與 電腦瀏覽器 顯示的最主要關鍵。

您可以實際操作以下的範例 感受一下 動態配置的威力

 選單自適應

響應式網頁的另一大特色絕對就是主選單的動態變化，如果沒這個功能大概不能稱作響應式網頁，通常網頁上的 主選單 都是橫向且會佔據很長的空間，所以瀏覽器縮小的時候 ，響應式網頁必須想辦法處理這個又長但又特別重要的元件，目前大部分的處理方是就是把 橫式 轉成 直式 。

 圖片自適應

圖片在響應式網頁中需要作甚麼處理嗎 ? 這裡考量的點主要有兩個

1. 網路頻寬
   行動裝置所面對的網路頻寬通常不太穩定，而圖片又常常很大，我們不希望圖片佔據太多網路頻寬進而拖慢瀏覽速度 。
   
2. 鋸齒邊緣
   行動裝置的螢幕比較小，如果把原本的大圖直接丟到小螢幕瀏覽器上顯示，會出現鋸齒邊緣。

目前對於圖片的處理方式有兩種 

1. 延遲載入
   當一個圖片出現在瀏覽器可視區時，才動態載入圖片，否則就根本不要載入圖片，減少頻寬。

1. 即時縮圖
   根據瀏覽器目前的大小 決定要產生一個多大的圖，舉例來說 ，小螢幕裝置的瀏覽器用小圖來回應就可以，既不影響網頁品質也降低頻寬需求。

 表格自適應

表格在傳統網頁內容中，是大量的被使用，即使到今天，還是存在於最新式的響應式網頁內容中 ，那麼試想，我們要如何縮小顯示以下表格 :

大型表格的處理比較棘手，目前並沒有一套標準又完美的處理方式，只能見招拆超，但最常使用的方法就是動態隱藏較不重要的欄位(Column) ，以上述表格範例來說，可以假設重要的欄位是 , 日期、開盤價、收盤價 與 漲跌價差 , 其他的都是不重要的欄位，所以縮小顯示的方式就會如下 :

響應式表格並沒有一定的處理方式，還是要看內容本身與網站定位來決定。

進階功能

 主視覺(Banner)特效

在傳統網頁上，主視覺的部分都是以 Flash 物件 來呈現，好像沒有 Flash 就不算是一個網站，這幾年 Flash 淡出市場，主視覺的呈現就僅以一張大圖片來呈現了。

但是以單張大圖來呈現 雖然簡單，卻也單調了一些，因此許多網站發展了很多的補強特效，如 圖片輪播、内崁圖文動畫，而且都是純 HTML5 + CSS3 作出來的，不是 Flash 物件。

圖片輪播

0

1

電音坦克

多用途行動電源

音樂電力、隨手可得

電音坦克
多用途行動電源
音樂電力、隨手可得

內崁圖文特效

 觸控播號

這是針對手機裝置裝置來說，現在只要加一段簡單的語法，就可以讓指定的圖片有快速播號功能，如下:

但新一代的手機瀏覽器，任何語法都不需要加，瀏覽器只要辨識到是電話號碼的連續數字，自然就會加上觸控撥號功能，如下 :

  開啟指定 APP

最新的手機瀏覽器 是可以在網頁中開啟  APP 的，如果沒有安裝該 APP，可以轉到 APP Store 進行下載。

 手勢觸控

手機瀏覽器可以偵測手勢滑動方向，網頁工程師可以取得這些觸控方向來決定 現在要執行的是 圖片輪播、上一頁、下一頁 還是 切換到不同的主題單元，譬如在 Yahoo 首頁作左右滑動時，您可能會看到以下畫面:

 互動式 3D 物件

3D 物件的處理在新一代的瀏覽器中已經大幅獲得支持，雖然比起 APP 來說，速度是慢了一點，不過可以確定的是，在不久的未來，就可以在 HTML 網頁中，直接玩複雜的 3D 遊戲了。

這邊列出一些目前世界上相當不錯的純網頁 3D 物件，不過請用 Google Chrome  來開啟 :

3D RPG 射擊遊戲

純 HTML 的 室內 3D 射擊遊戲，但是沒有作得很完整。

圖片自動 轉 3D

透過四面八方拍幾張照片，就可以把整個城市的 3D 物件建出來，沒有拍到的地方還會自動猜測。

3D 賽車

3D 方塊消去遊戲

純 HTML 製作的 3D 方塊消去遊戲 。也許您曾經玩過電腦版的。

3D 雲

純 HTML 作出來的擬真 3D 雲，不是真的 3D， 但很逼真，也可以隨滑鼠操控方向。

3D 地球

純 HTML 拚出來 圓形地球，有各個國家，上面還有雲在飄，整個地球還會轉 !