響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)也是重點(diǎn):靈活性(5)
#push li a { padding-left: 27.7777777%; /* 25px / 90px */ }
縱向值
到目前為止,我們已經(jīng)嚴(yán)謹(jǐn)?shù)赜?jì)算了左右的水平值,但是我們在x軸和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)站的和都有縱向的padding:有20px的頂部padding,有20px的底部padding。(見圖4)
要確定這些padding比例值,我將16px作為上下文高度值(也就是基本字體的大小),并使用相同的公式進(jìn)行計(jì)算: 20 ÷ 16 = 1.25
請記住,垂直方向上的比例值應(yīng)該以em為單位。也就是說可以在CSS中直接使用浮點(diǎn)值,不用轉(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- 前綴進(jìn)行標(biāo)識(shí),左右的值用RL-前綴。這僅僅試是幫我記錄這些比例值是如何計(jì)算的。你同樣可以使用自己熟悉的格式或者語法,強(qiáng)烈建議你花些時(shí)間去記錄他們。
成比例的高度
在開發(fā)當(dāng)中,我通常不會(huì)指定高度值。但是在EE Podcast網(wǎng)站中需要做很多高度的設(shè)定,比如,的高度設(shè)定為148像素
本文地址:http://www.likemindfilms.com/tutorial/di1367.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏