您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

響應(yīng)式網(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)行自動(dòng)調(diào)整。

  當(dāng)我第一次了解到它時(shí),我就立即被迷住了--特別是media queries,我馬上就用到我自己的個(gè)人兼職網(wǎng)站上。我甚至寫了一篇文章介紹《如何使用CSS3 Media Queries響應(yīng)不同設(shè)備》(強(qiáng)烈建議在讀這篇文章之前讀一下)。

  在第一次嘗試使用media queries后,我很快意識(shí)到我忽略了一個(gè)響應(yīng)式設(shè)計(jì)的重點(diǎn): 靈活性。

  挑戰(zhàn)固定寬度

  我的個(gè)人兼職網(wǎng)站使用了固定寬度的設(shè)計(jì),所有的width, margin和padding都使用了固定的像素值。 我一般都會(huì)這樣寫網(wǎng)站,因?yàn)閷?duì)我來說它更簡單,更快速。

  但當(dāng)我試圖在我的固定寬度的網(wǎng)站上應(yīng)用media queries的時(shí)候,那些簡單和快速的優(yōu)勢(shì)全部都消失了。為什么?因?yàn)閷?duì)于固定寬度的設(shè)計(jì),我需要非常細(xì)致的定義media queries并在CSS文件中調(diào)整每個(gè)單獨(dú)的像素值,基本上,我需要為每一種可能的分辨率都設(shè)計(jì)一個(gè)全新的布局,繁瑣!慢!!還不好玩!!!

  我有幸聽了Marcotte先生在《In Control 2011》的演講,他討論了響應(yīng)式設(shè)計(jì)的理論和最佳實(shí)踐,諸如fluid grid(流體網(wǎng)格)實(shí)現(xiàn)方式。

  流動(dòng)且靈活的公式

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

  這對(duì)于實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)來說簡直太美妙了。如果我有一個(gè)基于比例值的布局,流動(dòng)式的網(wǎng)格將替我完成大部分繁重的工作。我的media query將不再需要包含那些覆蓋其他分辨率的所有width, margin和padding的樣式定義。

  但是也有一點(diǎn)讓我感到頭疼,計(jì)算流動(dòng)式網(wǎng)格的比例寬度需要用到一些數(shù)學(xué)知識(shí),我數(shù)學(xué)不太好…

  幸運(yùn)的是, Ethan 提供了一個(gè)很簡單(即便對(duì)我來說)的公式來計(jì)算比例寬度:

  目標(biāo)寬度÷上下文寬度=結(jié)果(比例寬度)

  這個(gè)公式用子元素的像素寬度(目標(biāo)寬度)除以它父元素的像素寬度(上下文寬度),得到的結(jié)果就是這個(gè)子元素的比例寬度。

Example of Target (300px) and Context (960px)

  圖1 實(shí)例:目標(biāo)寬度(300px)和上下文寬度(960)像素

  在圖1中,例如,深灰色區(qū)域?qū)挾葹?00px,包含在寬度為960px的淺灰色區(qū)域中.這里,960像素區(qū)域是上下文元素,300像素區(qū)域是目標(biāo)元素,所以我們的數(shù)學(xué)公式是: 300 ÷ 960 = 0.3125

  0.3125這個(gè)結(jié)果需要變成瀏覽器可識(shí)別的數(shù)值, 因此需要轉(zhuǎn)化成一個(gè)比例值, 將小數(shù)點(diǎn)右移兩位,變成31.25% 即可。然后在CSS中,將元素的寬度設(shè)定為這個(gè)比例值:

  aside{ background-color:#ccc; float:left; width:31.25%; }

  測試一下

  公式雖然看起來很簡單,但我知道必須在實(shí)際的網(wǎng)站中檢驗(yàn)一下才行。幸運(yùn)的是,我最近加入了EE播客,正在重新設(shè)計(jì)那個(gè)網(wǎng)站。當(dāng)我的搭檔給我她的 PS 設(shè)計(jì)文件時(shí),我就決定將它打造成靈活布局的網(wǎng)站。

  比例寬度

  我首先記錄下所有元素的像素寬度。(在排版設(shè)計(jì)事,我們沒有嚴(yán)格遵循網(wǎng)格布局,這也是我建議的做法)正如你在圖2中看到的。整體寬度為940像素,Logo,主持人介紹和分享鏈接都有它們各自的像素寬度。

Pixel Widths for the Main Page and Header Elements

  圖2 主頁和頂部導(dǎo)航元素的像素寬度

  按照 Ethan 的公式,整體寬度940px就是我的上下文寬度,根據(jù)它就可以確定所有元素的比例寬度.

  Logo: 240 ÷ 940 = .255319148

  主持人介紹: 436 ÷ 940 = .463829787

  分享鏈接: 90 ÷ 940 = .09574468

  隨后我將這些浮點(diǎn)值轉(zhuǎn)換成百分比值,運(yùn)用到我的CSS中:

  #logo a{ width:25.5319148%;/*240px/940px*/ } #hosts{ width:46.3829787%;/*436px/940px*/ } #push{ width:9.574468%;/*90px/940px*/ }

  我沒有對(duì)這些百分比值進(jìn)行四舍五入,而是直接運(yùn)用在CSS中。我也從來沒有遇到過任何瀏覽器對(duì)這樣精度的百分比值識(shí)別錯(cuò)誤的情況(包括IE)。

  同時(shí),我為每一個(gè)百分比值都注釋了計(jì)算它所用到的目標(biāo)寬度和上下文寬度,這對(duì)于今后的開發(fā)來說是非常重要的參考。

  確保你的上下文寬度是正確的

  只要你的數(shù)學(xué)計(jì)算是正確的,那么將寬度值轉(zhuǎn)化為比例值的過程就是很簡單的,或者,更具體地說,只要你的上下文寬度是對(duì)的,那么你得到的比例值也就是正確的.

  實(shí)戰(zhàn)中, 我通過計(jì)算得到的比例值很少會(huì)出錯(cuò),除非我將上下文寬度搞錯(cuò)了。

  像圖3中標(biāo)示,主持人信息是一個(gè)包含

 

 

,

 

 

 

 

等元素的定義列表

 

Pixel Widths for the <dl>

  圖3

 

  剛開始計(jì)算的時(shí)候,我先用960像素作為我的上下文寬度,因此

 

  但是這個(gè)比例值(12.0833333%)不是我要的正確尺寸.直到我意識(shí)到我的上下文寬度是不同的,我才得到了正確的比例值.

  對(duì)于

 

  如果你計(jì)算的比例寬度有任何問題,請(qǐng)先檢查一下選定的上下文寬度是否正確,這會(huì)幫你省不少事。

  成比例的字號(hào)

  我將ee-podcast.com變得更加“靈活”的第二步是使用比例字號(hào),它和比例寬度的道理是相同的:將固定的像素值變成比例值,字體的比例值使用em進(jìn)行計(jì)算.

  要計(jì)算比例em,使用相同的公式(目標(biāo)寬度 ÷上下文寬度 = 結(jié)果)即可,字體的上下文寬度就是它基本字號(hào),通常在body元素中定義:

  body { font: 100%/1.5 "Open Sans",Arial,Helvetica,sans-serif; }

  大多現(xiàn)代瀏覽器的基本字號(hào)是16px,如果你設(shè)定的比例字號(hào)是100%,字號(hào)同樣也是16px.

  現(xiàn)在,我們來考慮一下主持人名字的字號(hào),在版式設(shè)計(jì)時(shí)設(shè)定的是12px,使用公式12÷16=.75就得到了它的em值。這個(gè)浮點(diǎn)數(shù)不用轉(zhuǎn)換成百分比值就能直接在CSS中使用:

  #hosts dd{ font-size:.75em;/*12px/16px*/ }

  成比例的padding和margin

  對(duì)于padding和margin來說,那個(gè)神奇公式同樣有效. 讓我們考慮一下主持人信息當(dāng)中,右margin被設(shè)定為20像素的

 

  將小數(shù)點(diǎn)右移兩位,得到的百分比值可用到CSS中:

  #hosts dt{ margin-right:4.5871559%;/*20px/436px*/ width:26.6055045%;/*116px/436px*/ }

  對(duì)于padding的計(jì)算來說也是一樣。

Horizontal Padding for Main Containers

  圖4 主區(qū)域的橫向padding

  ee-podcast.com的主區(qū)域(如圖4所示)的寬度為940px,同時(shí)左右各有40px的橫向padding。我使用目標(biāo)寬度(40px)除以上下文寬度(940px)得到它們的比例寬度:

  header,footer,.wrap { padding-right:4.25531%;/*40px/940px*/ padding-left:4.25531%;/*40px/940px*/ width:79.3%; }

  特例

  這個(gè)公式對(duì)于橫向padding比例寬度的計(jì)算有一個(gè)特例:對(duì)于padding而言,上下文元素永遠(yuǎn)都是這個(gè)元素本身,無論父元素的寬度是多少。

  例如圖5所示的分享鏈接,文字左側(cè)均有25像素的橫向padding來放圖標(biāo).

Context for Padding

  圖5 padding的上下文寬度

  計(jì)算此padding的比例值時(shí),應(yīng)將這個(gè)元素本身的寬度(90px)作為上下文寬度,而不是父元素的寬度940px.(圖2)

  25 ÷ 90 = .277777777

  因此padding的百分比值設(shè)定為:

  #push li a { padding-left: 27.7777777%; /* 25px / 90px */ }

  縱向值

  到目前為止,我們已經(jīng)嚴(yán)謹(jǐn)?shù)赜?jì)算了左右的水平值,但是我們?cè)趚軸和y軸方向都會(huì)設(shè)定padding和margin,這就意味著,上下文寬度應(yīng)該依據(jù)水平或垂直方向而變化。

  正如你之前看到的那計(jì)算,水平方向的百分比值,都是以父元素的寬度作為上下文寬度的(padding是除外)。與此同時(shí),縱向em值是以基本字體大小作為上下文值的。

  如果你還記得成比例的字號(hào)的計(jì)算那一部分內(nèi)容,我們?yōu)镋E-podcast.com設(shè)定的基本字體大小是16px. 所以,如果我想指定縱向的margin和padding,上下文高度值就是16px. 此外,縱向值應(yīng)該用em表示,不是百分比 –和成比例的字號(hào)的單位一樣。

  這個(gè)網(wǎng)站的

,這些元素的寬度值各不相同.

 

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di1691.html
用戶體驗(yàn)無處不在—-發(fā)現(xiàn)生活中的用戶體驗(yàn)美
11招!提升設(shè)計(jì)的立體感、深度感
圖趣網(wǎng)微信
建議反饋
×