網頁柵格系統的粒度問題

來源:互聯網
上載者:User

研究(2)中討論了柵格系統的基礎知識。這一篇將集中探討柵格系統的粒度問題。(註:如非特別指明,柵格系統均指24列960柵格系統)

淘寶的首頁(截圖)目前尚未嚴格遵守柵格系統,如果重構的話,寬度方向可以考慮採用下面的柵格布局(只考慮頁面主體部分,忽略高度的比例):


(圖1)

紛亂的高度世界

我們來看下圖1左上方。左上方部分目前的寬度為256px, 重構的話可以將寬度縮小到230px以符合柵格(不可避免的要調整內容,比如人氣寶貝中將只能放下3張圖片)。來仔細看下高度方向:


(圖2)

高度方向的布局是:90 : 117 : 100, 第一個間隔是8, 總高度為325. 很明顯,高度方向沒有任何柵格化的跡象。實際上,即便是嚴格遵守柵格系統的Yahoo!首頁,高度方向上也沒有嚴格柵格化。

這究竟是為何?

一切皆有可能

我們縮小關注點:


(圖3)

上圖中,映像的大小是70 x 70, 剛好是24列960柵格系統兩列的寬度。對於右邊的文字,採取了如下樣式:

font-size: 12px;
line-height: 150%; /* 12 x 150% = 18px */中文字型是宋體,line-height的計算值是18px.



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。