2013年10月8日星期二

響應式網頁設計基礎也是重點:靈活性(一)


在第一次嘗試使用media queries後,我很快網路行銷意識到我忽略了一個響應口碑行銷式設計的重點: 靈活性。

  挑戰固定寬度

  我的個人兼職網站使用了固定寬度的設計,所有的width, margin和padding都使用了固定的像素值。 我一般都會這樣寫網站,因為對我來說它台北網頁設計更簡單,更快速。

  但當我試圖在我的固定寬度的網站上應用media queries的時候,那些簡單和快速的優勢全部都消失了。為什麼?因為對於固定寬度的設計,我需要非常細致的定義media queries並在CSS文件中調整每個單獨的像素值,基本上,我需要為每一種可能的分辨率都設計一個全新的布局,繁瑣!慢!!還不好玩!!!

  我有幸聽了Marcotte先生在《In Control 2011》的演講,他討論了響應式設計網頁設計台北的理論和最佳實踐,諸如fluid grid(流體網格)實現方式網路行銷台中

  流動且靈活的公式

  流動式布局是靈活的。由於width,margin和padding(甚至字體和圖像)使用了百分比和em(相對長度單位),因此頁面布局會隨著瀏覽器的窗口變化而變化。隨著分辨率的改變,布局會成比例地進行調整,實現過程中不需要用到任何media query。

  這對於實現響應式網頁設計來說簡直太美妙了。如果我有一個基於比例值的布局,流動式的網格將替我完成大部分繁重的工作。我的media query將不再需要包含那些覆蓋其他分辨率的所有width, margin和padding的樣式定義。

没有评论:

发表评论