[前端] 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 Grid、Bootstrap 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()吧！

2013年2月11日星期一