2013年2月11日 星期一

[前端] Responsive Web Design - 自適應網頁設計技巧整理

自己在開發網站前端時往往會希望在任何device上的UX都能呈現到最好,又不想為每種顯示模式特別再寫一份layout,就開始研究RWD,畢竟很多實驗性或是新創網站是沒那麼多成本去特別寫一個mobile版的。

"Responsive Web Design",或"自適應網頁設計"其實比較像是個設計概念,而不是什麼特定技術,但是在實踐他的過程中我們還是需要一些小技巧,以下是到目前為止累積的一點小心得:


1. CSS: width:X%

一般在設計網頁常用的兩欄式、三欄式設計,往往是用固定的欄寬來對side area做定義,但當螢幕寬度小於網頁的總寬度的話就會出現橫向的scroll-bar,這是在行動裝置上所不樂見的,最好的方法是利用比例來做切割,例如1:3的兩欄式就可以利用個別設定他們的寬度為"25%"、"75%"
(但事實上你往往會需要為他們留一點margin,所以比較實際的配置應該是25:1:74之類的)
Fluid 960 GridBootstrap fluid layout 等都是可以拿來現成使用的樣板。


2. CSS: max-width: X%

雖然直接用比例來定義欄位或container的寬度十分方便,但有時候會遇上「寬度100%在小螢幕剛剛好,但在寬螢幕上看就是大的很奇怪」或是「寬度60%在大螢幕剛剛好,但在小螢幕就太小」的這種尷尬情況。這種時候可以用接下來會講到的Media Query來解決,但畢竟要多寫一種css配置實在有點麻煩,畢竟有的時候這只是局部性的小配置罷了。這種令人尷尬的小壞蛋只要用max-width就可以輕鬆的切換寬/窄螢幕下適合的寬度設定!解決的方式如下:
.ding-dong-box{
    width: 480px;
    max-width: 100%;
}
這樣一來只要這個box的container的寬度大於480px,ding-dong-box會維持原樣,而當縮到比480px窄的時候,ding-dong-box也會跟著一起縮小。實際應用可以參看這個網頁試算表格


3. CSS: Media Query

Media Query就是讓瀏覽器判定目前的devise寬度套用不同的css設定,很多前輩都已經寫得很棒了,小弟在這邊就恭敬的附上幾篇連結:
用CSS3的Media Queries進行自適應網頁設計(Responsive Web Design)
Mobile Web 前端技術筆記(二): Media Queries 與 CSS
比較要注意的是,在行動裝置上的配置不能用@media  screen and (max-width: 480px)來達成,
針對行動裝置的偵測必須寫成:@media screen and (max-device-width: 480px)
而Media Query 的最終目的就是要讓layout能在大型裝置的橫向配置和行動裝置的縱向配製作切換。至於這些配置間的不同,可以看這篇文章的介紹:"Responsive Design with CSS3 Media Queries" 或是參考 "Bootstrap fluid layout" 這個template,總之概括來說就是要讓兩欄(ex. 30:70)或三欄(ex. 20:60:20)這種配置可以在行動裝置上切換成縱向的配置(每個區塊的寬度都是100%)


4. align="center" VS style="margin: 0 auto;"

很常見的水平置中問題,除了在外面套一層align屬性為center的container以外,你也可以設定margin為"0 auto",利用margin來平均補齊左右空間達到水平置中的結果。
總而言之,拜託不要再用<center></center>了.....


5. Javascript

放大絕,特殊情形不知道該怎麼解決的時候就用$(window).resize();和$("").css()吧!