初學者淺談自適應網頁設計

這次做的 Whatever Lab 佈景主題,採用了自適應網頁設計 (Responsive Web Design)。網路上有為數眾多的教學文章,介紹基礎和概念、告訴我們如何導入 CSS3 media queries、以及字體大小單位和圖片該如何處理,因此個人認為自適應網頁設計入門最困難的地方不是導入,而是版面設計、如何規劃出一個適用於各畫面大小的網頁。

這邊用一句話概括個人對自適應網頁設計的理解--當畫面變小的時候,有些東西會移動或改變大小、有些東西會消失,或是這些東西重新排列。換句話說就是,當螢幕解析度變小或瀏覽器畫面變小時,一些區塊會位移至其他區塊的下方、一些區塊或物件則消失,或者乾脆讓這些區塊和物件重新排版。

範例

舉例如上圖,畫面中有三個寬度皆為 30% 的並排區塊。當畫面寬度從 480 像素縮小為 240 像素時,右邊的區塊會往下掉,紅色的區塊維持原位、橘色移動到紅色的下方、黃色則移動到橘色下方,另外為了讓區塊不至於縮小到不方便閱讀,我們可以將三區塊的大小改為 100%。此外,綠色的區塊內容可能不是必要資訊,所以畫面縮小時可以將其隱藏。當然前述只是舉例而已,改變的東西不限於區塊,文字、圖片等皆適用。

淺談到這裡結束、總結一下,雖然上面的例子看起來相當簡單、這邊版面也弄得很普通,但一個採用自適應設計的網頁、要做的複雜又令人驚豔,從版面草稿階段就必須詳細規劃(還要有靈感)。這邊推薦 “Media Queries“,它蒐集很多採用此設計的網站,相信對有興趣實作的人會有幫助。希望未來可以看到更多採用此設計的網站!

其他推薦網站:
阮一峰的网络日志:自适应网页设计(Responsive Web Design)
Treehouse Blog:Beginner’s Guide to Responsive Web Design
BenjaminKeen.com:Responsive Design bookmarklet

分類:網站網誌