網(wǎng)頁寬度多少最適合?(轉(zhuǎn))
公司網(wǎng)站最近一個月統(tǒng)計出來的訪客分辨率報表圖:
可見,目前使用800*600的幾乎是微乎其微了,1024還是居于上風(fēng),目前19,21寸甚至更大的顯示正在逐步被廣泛使用,所以N年前流行的778,780等等都好像是幾個世紀(jì)以前的事情了。
再看一組數(shù)據(jù)
網(wǎng)站 | 首頁頁面寬度 px |
---|---|
Yahoo! | 950 |
淘寶 | 950 |
MySpace | 960 |
新浪 | 950 |
網(wǎng)易 | 960 |
Live Search | 958 |
搜狐 | 950 |
優(yōu)酷 | 960 |
AOL | 960 |
上面都是Alexa全球排名前100的站點,而且WordPress的皮膚,百分之90以上都是960px寬。為什么設(shè)計師們都喜歡這個數(shù)據(jù)(950px/960px)呢?以下部分轉(zhuǎn)自網(wǎng)頁柵格系統(tǒng)研究(1):960的秘密,作者:玉伯
設(shè)計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下,打開Firefox:
自然狀態(tài)下,F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框,網(wǎng)頁的實際大小為上圖中的紅色部分,高寬為 960 x 650.
數(shù)字背后的奧妙
上面的“自然”出現(xiàn),細(xì)究自然是不讓人信服的。蘋果系統(tǒng)的設(shè)計者們在沒有喝醉酒的情況下選擇了960,而不是其它什么1000之類的整數(shù),自然另有奧妙。
科學(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上,我們也從數(shù)學(xué)著手:
960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍:
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身),我們標(biāo)記為:
N(960) = N(2^6 * 3 * 5) = 26
根據(jù)上面的算法,可以得到:
N(360) = N(2^3 * 3^2 * 5) = 22 N(480) = N(2^5 * 3 * 5) = 22 N(720) = N(2^4 * 3^2 * 5) = 28 N(750) = N(2 * 3 * 5^3) = 14 N(800) = N(2^5 * 5^2) = 16 N(960) = N(2^6 * 3 * 5) = 26 N(1000) = N(2^3 * 5^3) = 14 N(1024) = N(2^10) = 9 N(1440) = N(2^6 * 3^2 * 5) = 34 N(1920) = N(2^7 * 3 * 5) = 30
根據(jù)直覺(嚴(yán)格證明也不難,不過還是留給數(shù)學(xué)系的學(xué)生去證明吧),我們得到一個有趣的結(jié)論:
要使得N(width)最大,width的取值有兩個系列:
A系列: …, 320, 720, 1440, …
B系列: …, 480, 960, 1920, …
N越大,可組合的寬度值就越多。對柵格系統(tǒng)來說,這意味著越靈活!
目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度,可以看出960是非常合適的。這樣,在目前主流顯示器下,960就成為網(wǎng)頁柵格系統(tǒng)中的最佳寬度了。(也許不久的將來,將會流行1440)
以上內(nèi)容轉(zhuǎn)自http://lifesinger.org/blog/?p=375
posted @ 2010-03-23 14:01 Angle Wang 閱讀(1039) | 評論 (0) | 編輯 收藏