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的樣式定義。
订阅:
博文评论 (Atom)
没有评论:
发表评论