网页栅格系统研究(3):粒度问题
作者:玉伯 来源:Taobao.com UED Team 发布时间:2008-10-28 19:46:00
研究(2)中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。(注:如非特别指明,栅格系统均指24列960栅格系统)
淘宝的首页(截图)目前尚未严格遵守栅格系统,如果重构的话,宽度方向可以考虑采用下面的栅格布局(只考虑页面主体部分,忽略高度的比例):
纷乱的高度世界
我们来看下图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. 注意图3中文字部分可视区域的高度为65, 上下各有4px和1px的间隙。为什么会产生这么奇怪的间隙呢?我们来看下图:
(图4)
从上图中我们可以得知,12px的宋体中文字,实际高度只有11px. line-height
减去11多出来的高度,则“均匀”分布在上下间隙中(如果多出来的高度为偶数,则上下均分;为奇数时,上面比下面多1px)。这样,对于70px的高度来说,要布局4行文字时,假设行高多出来的上半部分为x
, 下半部分为y
, 在最理想的情况下,应该满足以下公式:
11 * 4 + 4 * x + 3 * y = 70 x = y 或 x = y + 1
不难推出,x
最理想的整数解为4. 从而line-height
为 4 + 11 + 3 = 18. 因此:
对于24列960栅格系统来说,如果要在高度方向上实现栅格,font-size
为12px时,line-height
的最佳取值是18px(150%).
追求完美点话,还可以将文字部分margin-top: -1px
, 使得65上下的间隙为3和2.
至此,我们可以初步判断:
高度方向上是有可能严格栅格化的。一切皆有可能!
猜你喜欢
- 安装一些必要的环境1.下载go sdk (本人装的是1.9) 2.下载golang3.下载git 因为有些依赖 要用 go get 去git
- 在python列表中,如果我们想要删除一个或者连续几个元素,可以使用del()方法,在numpy数组,如果想要删除元素,可以使用numpy.
- 开始前一阵子,在项目中碰到这样一个SQL查询需求,有两个相同结构的表(table_left & table_right),如下:图1
- 别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简
- 1.在浏览器下载与浏览器相对于的驱动并放到python的安装根目录下驱动的两个下载地址:http://chromedriver.storag
- 很多朋友问到sql server数据库”生成脚本”,只导出了数据库的sql脚本,而表里的数据依然没有导出来。很简单,看教程:注:我这里用的S
- 1.需求描述编写一个 Python 程序,每次下载压缩包形式的文件后,自动将内部文件解压到当前文件夹后将压缩包删除,通过本案例可以学到的知识
- 运行的时候,有时候会出现语法错误: IndentationError: unexpected indent可以用如下方法
- 本篇文章通过使用python实现对计算机摄像头的调用从而实现摄像监控的功能。利用opencv的图像处理功能可以轻松对计算机摄像头的调用实现实
- 本文实例讲述了python根据开头和结尾字符串获取中间字符串的方法。分享给大家供大家参考。具体分析如下:这里给定一个字符串,指定开头和结尾的
- 无意中看到朋友写的一篇文章“将表里的数据批量生成INSERT语句的存储过程的实现”。我仔细看文中的两个存储代码,自我感觉两个都不太满意,都是
- 如果直接从生成验证码的页面把验证码下载到本地后识别,再构造表单数据发送的话,会有一个验证码同步的问题,即请求了两次验证码,而识别出来的验证码
- 1. linux下消息记录关于系统的各种消息一般都会记录在/var/log/messages文件中,有些主机在中默认情况下有可能没有启用,具
- 晚上打开MAC,发现root帐户突然不能正常登陆MySQL,于是打算重置密码,看了几篇文章,竟然重置不成功,总是得到Unknown colu
- 1 端口映射举个例子来说明一下端口映射的作用。有A、B、C三台计算机,A、B互通,B、C互通,但是A、C不通,这个时候在C上开了一个Web服
- 界面的制作一直是 Python 的痛!使用 Python 制作桌面端界面是非常痛苦的过程(又难学又难看)。不过,Python 已经出现了几个
- asp如何获知页面上的图象的实际尺寸大小?见下面的两个asp文件:<!--#include virtual="/i
- 本文实例讲述了Python实现将目录中TXT合并成一个大TXT文件的方法。分享给大家供大家参考。具体如下:在网上下了一个dota的英雄攻略,
- ajax的优缺点AJAX使用Javascript技术向服务器发送异步请求AJAX无须刷新整个页面因为服务器响应内容不再是整个页面,而是页面中
- 不止一次在微信、知乎有读者朋友跑过来问:看完了基础书,甚至看两遍了,但自己写的时候还是没思路,我该怎么办?编程在我看来就是一门手艺活,绝不是