響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)也是重點(diǎn):靈活性
響應(yīng)式網(wǎng)頁設(shè)計(jì)最近講了很多,源于這是一個近期網(wǎng)頁設(shè)計(jì)的趨勢。
在過去的一年里,如果你不是住在深山里,就一定知道響應(yīng)式網(wǎng)頁設(shè)計(jì),它已經(jīng)成為當(dāng)今的主流。響應(yīng)式設(shè)計(jì)是Ethan Marcotte提出的,概念很簡單:使網(wǎng)站的頁面布局能夠根據(jù)不同設(shè)備和分辨率進(jìn)行自動調(diào)整。
當(dāng)我第一次了解到它時,我就立即被迷住了特別是media queries,我馬上就用到我自己的個人兼職網(wǎng)站上。我甚至寫了一篇文章介紹《如何使用CSS3 Media Queries響應(yīng)不同設(shè)備》(強(qiáng)烈建議在讀這篇文章之前讀一下)。
在第一次嘗試使用media queries后,我很快意識到我忽略了一個響應(yīng)式設(shè)計(jì)的重點(diǎn): 靈活性。
挑戰(zhàn)固定寬度
我的個人兼職網(wǎng)站使用了固定寬度的設(shè)計(jì),所有的width, margin和padding都使用了固定的像素值。 我一般都會這樣寫網(wǎng)站,因?yàn)閷ξ襾碚f它更簡單,更快速。
但當(dāng)我試圖在我的固定寬度的網(wǎng)站上應(yīng)用media queries的時候,那些簡單和快速的優(yōu)勢全部都消失了。為什么?因?yàn)閷τ诠潭▽挾鹊脑O(shè)計(jì),我需要非常細(xì)致的定義media queries并在CSS文件中調(diào)整每個單獨(dú)的像素值,基本上,我需要為每一種可能的分辨率都設(shè)計(jì)一個全新的布局,繁瑣!慢!!還不好玩!!!
我有幸聽了Marcotte先生在《In Control 2011》的演講,他討論了響應(yīng)式設(shè)計(jì)的理論和最佳實(shí)踐,諸如fluid grid(流體網(wǎng)格)實(shí)現(xiàn)方式。
流動且靈活的公式
流動式布局是靈活的。由于width,margin和padding(甚至字體和圖像)使用了百分比和em(相對長度單位),因此頁面布局會隨著瀏覽器的窗口變化而變化。隨著分辨率的改變,布局會成比例地進(jìn)行調(diào)整,實(shí)現(xiàn)過程中不需要用到任何media query。
這對于實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)來說簡直太美妙了。如果我有一個基于比例值的布局,流動式的網(wǎng)格將替我完成大部分繁重的工作。我的media query將不再需要包含那些覆蓋其他分辨率的所有width, margin和padding的樣式定義。
但是也有一點(diǎn)讓我感到頭疼,計(jì)算流動式網(wǎng)格的比例寬度需要用到一些數(shù)學(xué)知識,我數(shù)學(xué)不太好…
幸運(yùn)的是, Eth
本文地址:http://m.pkvc.cn/tutorial/di1367.html