1024下网页宽度标准
来源:互联网 发布:哪个旅行软件好 编辑:程序博客网 时间:2024/04/29 12:05
研究网页栅格系统前,来看一组数据:
网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960
上面列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。
再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点,它们的首页宽度没什么固定规律,共同的特点是:功能专一,页面结构相对简单。
根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px.
这是一件很有趣的事情,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?
神奇的960
设计师们对苹果情有独衷。在 1024 x 768 的分辨率下,打开Firefox:
自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.
有趣的960就这样出现了。是的,可以认为一切就这么简单。栅格系统最早出现在平面设计领域,设计师们爱用苹果,苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。
数字背后的奥妙
上面的“自然”出现,细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960,而不是其它什么1000之类的整数,自然另有奥妙。
科学界有很多问题都可以归结到数学问题上,我们也从数学着手:
960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍:
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自身),我们标记为:
N(960) = N(2^6 * 3 * 5) = 26根据上面的算法,可以得到:
N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30根据直觉(严格证明也不难,不过还是留给数学系的学生去证明吧),我们得到一个有趣的结论:
要使得N(width)最大,width的取值有两个系列:
A系列: …, 320, 720, 1440, …
B系列: …, 480, 960, 1920, …
N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活!
目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了。(也许不久的将来,将会流行1440)
- 1024下网页宽度标准
- 不同宽度显示器下网页宽度的自适应
- 细谈标准网页的宽度、字体、字号等的设计原则
- 网页宽度设定
- 各种网页的宽度
- 网页宽度设计
- 网页自适应屏幕宽度
- 防止网页宽度被撑大
- 网页各种宽度
- PHP.4-DIV+CSS标准网页布局准备工作(下)
- 看网页的宽度设置应该基于1024以上了
- 网页宽度自动适应手机屏幕宽度
- IFRAME自动适应网页宽度
- 最佳网页宽度及其实现
- 最佳网页宽度及其实现
- 网页宽度多少最适合?
- 最佳网页宽度及其实现
- 宽屏窄屏的网页宽度设置
- WEB Workers 介绍
- enumerations
- 关于 static const char* P="jiashikun"的一些问题
- 如何从GOOGLE BOOK下载图书 并装订成PDF
- iframe 高度自适应
- 1024下网页宽度标准
- DataSet 取值,DataSet行数,DataSet列数 从DataSet中取出特定值
- 连接数据库的流程
- Maven 直接上传jar 文件到服务器。
- J2EE学习中一些值得研究的开源项目(转自CSDN)
- 桑梓团队使用Google Apps域中的邮箱的smtp和pop的配置
- linux-2.6.20内核移植 busybox1.9.2 并移植USB驱动
- 090929(星期二):理解控件消息
- 信息系统的概念