Grid 格子列表之 CSS 前製規劃 (下) Responsive Design

承上篇「Grid 格子列表之 CSS 前製規劃 (上)」主要整理了寫 Grid Display 時總寬度、元素寬度和間距寬度的算法，今天想分享的是加上 Responsive Design 時，土法煉鋼的算法。

發表上篇之後，小時候就很崇拜的 Even Wu 大哥跟我介紹了 Susy 這個 Grid System，專門給 Compass 用的，試用過後還滿喜歡的，這邊也介紹給大家。

Susy: Responsive grids for Compass. http://susy.oddbird.net/

不過因為我要的是內容呈現時的格子，每個頁面需要的 Grid Display 元素寬度又不盡相同，加上我已經土法煉鋼地用手算了，研究魂燃起，還是算完它吧！

在 Facebook 分享時，有位厲害的數學大師教了我幾種思考方式，真的是獲益良多，有興趣可以參考這篇。

獎金獵人因為前後端加上資料架構全部重寫，只有一個月的時間，來不及做 Responsive Design，上線後 debug 和各種客服又源源不絕，一直沒時間好好來 Responsive 一下。只能不斷說服自己我們需求不高：因為有四分之一的使用者解析度寬度都是 1024px，總寬度 960~980px 是最舒適的。

若用百分比寬度，我私以為 UGC 網站若使用百分比寬度的內容很不妥，若為了 Responsive 硬把內容擠來擠去又不夠優雅，對於網站的視覺設計負擔也太重，所以還是選擇固定寬度 + Responsive。總之我想慢慢來，先把最重要的比賽列表，保守地弄成符合最多數人使用的螢幕寬度。

規劃 Responsive Design

開始著手規劃獎金獵人的 Responsive Design。去 Google Analytics 把所有解析度做分析。一般來說，如果你只去看前幾名，數字可能不準。這是我們 GA 的畫面。

看起來好像 1024×768 最多，再來是 1366×768，然後是 1920×1080。但是細看後面，卻是長尾效應贏過前面的名次。我們現在只需要看寬度，所以可以點搜尋框旁邊的「進階」。會看到進階搜尋的選項。（點圖可以放大唷）

設定為「包含：螢幕解析度：比對規則運算式」，右邊欄位輸入 10[0-90-9]x，會篩選出所有寬度是 10xx 的訪客，按套用。

然後往上看，可以找到「造訪」的百分比，是 25%。

用這樣的方式，把幾種常見的訪客瀏覽器寬度抓出來，做了整理。目前獎金獵人使用者的解析度排行如下：

寬螢幕（寬度介於 1200~1440px）：40%
傳統螢幕（寬度約 1024px）：25%
超寬螢幕（寬度介於 1600~1920px）：15%

其他就是手機大小了。（手機版我是不打算用 Responsive Design，因為顯示的內容架構不會一樣，所以很慚愧地，mobile first 被小妹暫時放一旁，因為本站目前手機瀏覽量也極小，畢竟查比賽不是一種娛樂也不太有行動的需求，但有漸增之勢，所以手機版仍一直掛在我心上。）

看到這樣的排行真是心驚，原來大部分使用者螢幕寬度都已經超過 1200px 了，原本以為我們使用族群年紀小，以學生為主，學生的螢幕都不大才對（完全偏見），但我錯了！

所以現在目標是為 1200px 寬度的使用者著想，讓他們可以看到更寬的內容。原本是 5 格，希望變成一次可以看到 6 格。

Breakpoint 設定為寬度 1200px 以上

但因為我不想重新設計每格的寬度，所以保留一樣，是 184px，單列格數是 6 格。這樣公式是：

單格寬度A x 單列格數 + 間距a x (單列格數-1) = 總寬度

也就是：

184×6 + 15x(6-1) = 1179

也就是獎金佈告目前狀態。在螢幕解析度寬度超過 1200px，總寬度變為 1179px，一列有 6 格。

可是問題來了，因為新的「後花園作品集」的單格寬度較大，原本是一列 4 格，若在寬度 1200px 底下變成 5 格就會超過總寬度 1179px，所以若希望統一總寬度，勢必是要為了這兩種分區重新計算寬度了。

如花水木專頁上的Chun-Hung Arnose Chen指導（見此），我得到一些靈感。手寫了公式如最上圖並整理如下。

W2 = 1200+x （總寬度:希望是1200上下）
A1 = 6(184+y) （比賽總格子寬需為 6 的倍數，因為一列 6 格，y為單格寬度）
M1 = 5A （比賽總間距寬，B為單一間距寬度，希望在 5~15 之間）
A2 = 5(239+z) （作品總格子寬需為 5 的倍數，因為一列 6 格，z為單格寬度）
M2 = 4B （作品總間距寬，B為單一間距寬度，希望在 5~15 之間）

所以要找出 x, y, z, a, b，是能通過以下公式的。

1200+x = 6(184+y) + 5A = 5(239+z) + 4B

但小妹資質駑頓、數學不好，實在不知如何解上面的公式，所以只能一個一個數字套用。

因為 x, y, z 都希望越接近 0 越好，a, b 希望是 5~15 之間，所以先把 a, b 固定。有以下可能

1200+x = 6y + 25
1200+x = 6y + 30
1200+x = 6y + 35
1200+x = 6y + 40
1200+x = 6y + 45
1200+x = 6y + 50
1200+x = 6y + 55
1200+x = 6y + 60
1200+x = 6y + 65
1200+x = 6y + 70
1200+x = 6y + 75

1200+x = 5z + 20
1200+x = 5z + 24
1200+x = 5z + 28
1200+x = 5z + 32
1200+x = 5z + 36
1200+x = 5z + 40
1200+x = 5z + 44
1200+x = 5z + 48
1200+x = 5z + 52
1200+x = 5z + 56
1200+x = 5z + 60

以上兩團公式的 x 必須相同，所以有 11 x 11 種可能性。而且變數還是太多，所以先把 y 固定到 184 並一一套用以上公式，再把 z 這個數字固定成 239 並一一套用，看哪個得出的數字最接近 1200。並且如果 y, z 不是 0，還必須回到驗算正常寬度是否可行。

以下是正常寬度底下各個寬度。

w = 980 （總寬度980px）
a1 = 5(184+y) （比賽總格子寬需為 6 的倍數，因為一列 6 格，y為單格寬度）
m1 = 4a （比賽總間距寬，a為單一間距寬度，希望在 5~15 之間）
a2 = 5(239+z) （作品總格子寬需為 5 的倍數，因為一列 6 格，z為單格寬度）
m2 = 3b （作品總間距寬，b為單一間距寬度，希望在 5~15 之間）

公式：

980 = 5(184+y) + 4a = 5(239+z) + 3b

一次一次試過之後，目前得到的解答如下：

x = 27 （寬螢幕總寬度為 1227）
y = 8 （比賽單一格子寬度 184+8 = 192）
z = 0 （作品單一格子寬度 239 不變）

a = 10（正常螢幕比賽間距）
b = 8 （正常螢幕比賽間距）
A = 15（寬螢幕比賽間距）
B = 8 （寬螢幕作品間距）

因為我只知道一個一個套用來算，不知可以看到這邊的你，是否可以幫我算算看，是否有 x, y, z 更接近 0 的可能性呢？