響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)也是重點:靈活性(5)
#push li a { padding-left: 27.7777777%; /* 25px / 90px */ }
縱向值
到目前為止,我們已經(jīng)嚴謹?shù)赜嬎懔俗笥业乃街担俏覀冊趚軸和y軸方向都會設(shè)定padding和margin,這就意味著,上下文寬度應(yīng)該依據(jù)水平或垂直方向而變化。
正如你之前看到的那計算,水平方向的百分比值,都是以父元素的寬度作為上下文寬度的(padding是除外)。與此同時,縱向em值是以基本字體大小作為上下文值的。
如果你還記得成比例的字號的計算那一部分內(nèi)容,我們?yōu)镋E-podcast.com設(shè)定的基本字體大小是16px. 所以,如果我想指定縱向的margin和padding,上下文高度值就是16px. 此外,縱向值應(yīng)該用em表示,不是百分比 和成比例的字號的單位一樣。
這個網(wǎng)站的和都有縱向的padding:有20px的頂部padding,有20px的底部padding。(見圖4)
要確定這些padding比例值,我將16px作為上下文高度值(也就是基本字體的大小),并使用相同的公式進行計算: 20 ÷ 16 = 1.25
請記住,垂直方向上的比例值應(yīng)該以em為單位。也就是說可以在CSS中直接使用浮點值,不用轉(zhuǎn)換成百分比:
header,footer, .wrap{ padding:1.25em 4.25531%;/*TB-20px/16px|RL-40px/940px*/ width:79.3%; }
這里,我將橫向和縱向的padding值都簡寫了,修改了一些注釋的內(nèi)容,以便為今后的開發(fā)提供能多參考。
padding:1.25em 4.25531%;/*TB-20px/16px|RL-40px/940px*/
在這些注釋中,我將頂部和底部的值都用TB- 前綴進行標識,左右的值用RL-前綴。這僅僅試是幫我記錄這些比例值是如何計算的。你同樣可以使用自己熟悉的格式或者語法,強烈建議你花些時間去記錄他們。
成比例的高度
在開發(fā)當中,我通常不會指定高度值。但是在EE Podcast網(wǎng)站中需要做很多高度的設(shè)定,比如,的高度設(shè)定為148像素
本文地址:http://pkvc.cn/tutorial/di1367.html