申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
18562723728
返回贴子列表
发表新贴
主题：
栅格化的网页布局和0.618的关系
共有
1295
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称：奈薇建站网
论坛积分：108000
发贴等级：
21
发贴数：1156
回贴数：1282
被砸鸡蛋：
1
获赠鲜花：
182
发表时间：2019/11/13 11:22:00
楼 主
栅格化的网页布局和0.618的关系
前段时间在网络上发现最近网络上开始有很多人在讨论栅格化的网页布局，嗯。我也先介绍一下网页栅格化的布局情况吧。
最早提出网页栅格化的设计的人我忘记是谁了，但是应该是网页还停留在780宽度的时候就听说过栅格化的问题。从taobaoued的博客了解到
“1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（NicolasJaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。”
嗯。简单说来，网页栅格化解决的问题即是网页如何能最多的分割成为各种整数宽度的问题。。通过看上面的图片大家应该基本可以了解到什么是网页栅格化的设计，以上是950宽度的
网页设计
。如果把30作为每个单独的单元格的宽度，10作为每个单元格之间的宽度。那么950恰好可以分成24个小列，每个间隔10像素。
因此，这个就是网页栅格化最简单的一个解释了。下面我想说另外一个问题，即使黄金分割。把一条线段分割为两部分，使其中一部分与全长之比等于另一部分与这部分之比。其比值是[5^(1/2)-1]/2，取其前三位数字的近似值是0.618。由于按此比例设计的造型十分美丽，因此称为黄金分割，也称为中外比。这是一个十分有趣的数字，我们以0.618来近似，通过简单的计算就可以发现：
1/0.618=1.618(1-0.61/0.618=0.618
这个数值的作用不仅仅体现在诸如绘画、雕塑、音乐、建筑等艺术领域，而且在管理、工程设计等方面也有着不可忽视的作用。
如果细心一些的人会发现，黄金分割无所不在，包括拍张照片人物放在画面的黄金分割点上也是一种很好的构图方法。因此，黄金分割是一种公认最优秀的分割比例。
因此如果以一个950宽度的网页为例。最合适的分割比例其实是。
左侧：950×0.618=587
右侧：950×0.382=363
个人觉得黄金比例分割比栅格化靠谱很多，但是如果是一个门户网站，需要很多的小区块分割的网站，你要考虑倒栅格化的化，即是为了以后再分割考虑的化，那两列的比例也应该是最接近的应该是590像素和360像素。
为什么呢？
590=14×(30+10)+30
360=9×(30+10)
其实这个比例已经几乎等于黄金分割。因此这样的使用比较好。
同时，黄金分割不仅仅体现在网页的栅格化中,还体现在行高（line-height）上，一个网站的文字怎么样的距离才是最合适阅读的呢？这个是我一个困扰了很久的问题。
结果黄金分割很好的解决了我的问题。用中文最常见的12px宋体和14px宋体为例:
最合适阅读的行高是12像素：12×1.618=19.4PX
最合适阅读的行高是14像素：14×1.618=22.7PX
再举个实际的例子，在豆瓣上目前的行高度是150%，因此12像素宋体是18像素的行高。如果换用1.618的高度。我们对比一下：
非常明显，下面是最合适阅读的一种比例。
在一些比例问题上，就讨论到这里把。欢迎各抒己见。
奈薇建站网致力于，让每个中国人、每个中国企业都拥有自己的“官方网站”！
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户
1
182
