网页栅格系统研究(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、很多B2C或者淘宝的卖家反应,下单了但没有支付的占有率超过30%,有的甚至到40%。对于冲动性消费的商品来说,这个70%左右的转化率其实
- 技巧问题 Mysql的远程连接出现"Lost connection to MySQL server during query&qu
- 最近随着狂风计划的席卷,我也终于开始橱窗产品位列表展示的编码工作,这只是一个改进项目,因此有原代码可供参考。但是当我打开原代码模板的时候便愣
- 1.创建数据库连接,并打开set cnn=Server.CreateObject("ADODB.Connection&q
- 建立一个数据库表维护规范在一个定期基础而非等到问题出现才实施数据库表的检查是一个好主意。应该考虑到建立一个预防性维护的时间表,以协助自动问题
- 前面已经介绍了关于Dreamweaver MX 2004的基本操作
- 由于Oracle自身比较复杂,在Linux环境下安装要涉及很多方面的因素。本文分两个方面介绍在Linux RedHat 6.0环境下Orac
- alt的准确含义是,当照片不存在或者load错误时的提示。但同时img也同时支持alt和title,再有某些浏览器的错误解析,因此经常被误导
- 在学习与运用ASP中,response对象涉及到的方面也比较多,想全部都掌握也并非一两天的事,我也是最近才发现response对象中居然有这
- 1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHO
- 如果程序中没有设置session的过期时间,那么session过期时间就会按照IIS设置的过期时间来执行,IIS中session默认过期时间
- buffer:下载数据缓冲区,以字节为单位,缺省依赖操作系统 consistent:下载期间所涉及的数据保持read only,缺省为n d
- 最好的方法: 先说一下基本的东西: <%@ codepage=65001%>UTF-8 <%@&nbs
- 一个很简单的画像素画的小工具,有意思的地方在于可以把画的图案保存成数组,以方便之后快速还原出原图..<!DOCTYPE html PU
- 在IE进行文档链接时,如果遇到OLE支持的文档,IE会自动调用相应程序打开它,有时候这种功能并不是我们所需的,虽然我们可以提醒用户用鼠标右键
- 本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明.作者的网站:http://jorux.co
- 众所周知,随着数据库体积的日益庞大,其备份文件的大小也水涨船高。虽然说通过差异备份与完全备份配套策略,可以大大的减小SQL Server数据
- 第一章:基本的圆角框第二章:透明圆角化背景图片第三章:圆角化图片 第四章:CSS圆角框组件 V1.0在上面的案例中,我只给出最为原始的圆角框
- 之前在豆瓣上听到有友邻在抱怨卓越的配送速度慢得跟蜗牛一样,超过配送时间期限几天还没送到,当时不太相信,因为此前在卓越网上购买的物品基本上是在
- ASP正则表达式,RegExp对象提供简单的正则表达式支持功能。RegExp对象的用法: Function RegExpTest(