小析響應網頁設計技術(Responsive Web Design )

轉自我的部落格 http://blog.leeluolee.name/

Responsive Web Design 即一種新興的網頁設計方法，它基於CSS3的Media Query 語句,使得網頁可以適應不同的裝置。外國權威的網站給它的定義原文是這樣的:

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

一句話來歸納就是,網頁將隨著你的裝置的尺寸和你視窗縮放的尺寸自動重新布局 ,聽起來有點拗口是吧,最近的例子就是我的部落格.你在這裡就可以做幾個簡單測試來理解Responsive Web Design  當然我還並沒有做到很好 ):

1. 隨便進入一個頁面然後從最大尺寸（最好是1440以上開始）拖到320px以下,看螢幕的變化的情況 .
2. 如果有條件的話,用你的ipad與iphone的橫屏模式與豎屏模式分別測試一下.
3. 在遠古瀏覽器（IE<9）中重複1步驟 , 蝦米都沒發生, 就一平常不過的固定寬度980px的網頁

你應該可以發現 布局甚至字型都開始隨著螢幕的開始變動,而X捲軸始終沒有出現,行動裝置橫屏或豎屏但這當然不是簡單的通過設定百分比寬度就能達到的效果。在我看來這種設計方法相對於普通流體布局的最大優勢就是在保證自適應寬度之外(當然它自適應的更加優雅), 還可以使用網格系統設計網頁!!! 這是國內常見的流體布局所做不到的(其實在國外Responsive Web Design 已經炒的非常熱了,但是國內幾乎還搜不到任何資料.) 。

當然,唯一的弱點就是media query並不支援IE<9. 已經可以用mediaqueries-js 使所有的瀏覽器支援media query. 我並沒有這麼做,我一直是熱衷於差異對待的,當然我也不會激進的剝奪你瀏覽的權利(我的部落格沒有使用一張圖片,都是CSS3完成的,所以外觀的差異可以說相當大的.).

 

另外一個不得不考慮的問題就是如果按每個螢幕寬度都按固寬網格的方式設計布局,那最終出來的效果會非常不好,因為字型是隨著具體的裝置變化的(如果字型不變化,某些精細螢幕如ipad下的字型會非常的小), 固定不變的網格系統很容易設計得內容地區顯得過寬或者過窄,在這裡我借鑒了IA的處理方式,根據body的字型大小來確定網格的寬度,這樣就可以節省相當的CSS代碼.

我的部落格使用的是7格網格系統（很囧吧是個質數…在大型網站或者是個錯誤的示範,但在個人部落格的設計上卻有奇效）,格寬與格距為常規的9:1(也就是9em 與1em) ,按中文宋體一般來講最佳的顯示大小14px來算,

在不是行動裝置,並且螢幕處於1025-1440(國內電腦的絕大部分吧) 之間時,是980px的固寬的顯示效果.

在螢幕超過1440時, 字型為18px,寬度為1260,邊距留空也相當大,不會有突兀的感覺.

當螢幕小於1025時, 我設定寬度為39em 也就是 624px , 留空稍微多了點,但是考慮到要最佳化移動高清螢幕的顯示,並且1024的顯示器目前應該不會佔很大的份額

在ipad橫屏和豎屏時,我分別將字型設定為20px與18px 經過計算 也不會有橫向溢出的情形.

接著分別處理 <640px   <480px   <320px 的情況就可以了.

這樣設計下來,其實你會發現你的CSS代碼量會非常可觀~我這麼簡單的部落格CSS尺寸達到了未壓縮前24KB的胖體（當然主要原因是大量的CSS3屬性涉及到了-0-  -webkit- -moz-等分支）…但是一切都是值得的。

綜上所述我對於Responsive Web Design 的總結就是:

1. 只根據裝置尺寸設計font-family, font-size等細部.
2. 主要根據螢幕寬度的縮放,設計布局 這一步是與第一步協同進行的.
3. 使用變寬(基於body的font-size)的網格系統.
4. 考慮某些精細螢幕的裝置,比如ipad下的字型大小問題,對大螢幕(>1440)的字型也做放大處理

 

參考資源

1. Responsive Web Design: What It Is and How To Use It
2. Responsive Web Design
3. CSS Media Query for Mobile is Fool’s Gold
4. Examples Of Flexible Layouts With CSS3 Media Queries