网页栅格化以及黄金分割点

2023-10-22 05:59
文章标签 网页 栅格 黄金分割

本文主要是介绍网页栅格化以及黄金分割点,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前段时间在网络上发现最近网络上开始有很多人在讨论栅格化的网页布局,嗯。我也先介绍一下网页栅格化的布局情况吧。

最早提出网页栅格化的设计的人我忘记是谁了,但是应该是网页还停留在780宽度的时候就听说过栅格化的问题。从taobao ued的博客了解到

“1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导, 他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。”

taobao_grid_cols.png

嗯。简单说来,网页栅格化解决的问题即是网页如何能最多的分割成为各种整数宽度的问题。通过看上面的图片大家应该基本可以了解到什么是网页栅格化的 设计,以上是950宽度的网页设计。如果把30作为每个单独的单元格的宽度,10作为每个单元格之间的宽度。那么950恰好可以分成24个小列,每个间隔 10像素。

因此,这个就是网页栅格化最简单的一个解释了。下面我想说另外一个问题,即使黄金分割。
把一条线段分割为两部分,使其中一部分与全长之比等于另一部分与这部分之比。其比值是[5^(1/2)-1]/2,取其前三位数字的近似值是0.618。由于按此比例设计的造型十分美丽,因此称为黄金分割,也称为中外比。这是一个十分有趣的数字,我们以0.618来近似,通过简单的计算就可以发现:

1/0.618=1.618
(1-0.61 8) / 0.618=0.618

这个数值的作用不仅仅体现在诸如绘画、雕塑、音乐、建筑等艺术领域,而且在管理、工程设计等方面也有着不可忽视的作用。

如果细心一些的人会发现,黄金分割无所不在,包括拍张照片人物放在画面的黄金分割点上也是一种很好的构图方法。因此,黄金分割是一种公认最优秀的分割比例。

因此如果以一个950宽度的网页为例。最合适的分割比例其实是。

左侧:950× 0.618 = 587

右侧:950 × 0.382 =363

0618web.png

个人觉得黄金比例分割比栅格化靠谱很多,但是如果是一个门户网站,需要很多的小区块分割的网站,你要考虑倒栅格化的化,即是为了以后再分割考虑的化,那两列的比例也应该是最接近的应该是590像素和360像素。

为什么呢?

590 = 14 × (30+10) + 30

360 = 9 × (30+10)

其实这个比例已经几乎等于黄金分割。因此这样的使用比较好。

同时,黄金分割不仅仅体现在网页的栅格化中,还体现在行高(line-height)上,一个网站的文字怎么样的距离才是最合适阅读的呢?这个是我一个困扰了很久的问题。

 lineheight.png

结果黄金分割很好的解决了我的问题。用中文最常见的12px宋体和14px宋体为例:

最合适阅读的行高是12像素:12× 1.618=19.4 PX

最合适阅读的行高是14像素:14× 1.618=22.7 PX

再举个实际的例子,在豆瓣上目前的行高度是150%,因此12像素宋体是18像素的行高。如果换用1.618的高度。我们对比一下:

lineheight_1.png

非常明显,下面是最合适阅读的一种比例。

转载于:https://www.cnblogs.com/zbh18/archive/2010/07/25/1784889.html

这篇关于网页栅格化以及黄金分割点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/259499

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

禁止复制的网页怎么复制

禁止复制的网页怎么复制 文章目录 禁止复制的网页怎么复制前言准备工作操作步骤一、在浏览器菜单中找到“开发者工具”二、点击“检查元素(inspect element)”按钮三、在网页中选取需要的片段,锁定对应的元素四、复制被选中的元素五、粘贴到记事本,以`.html`为后缀命名六、打开`xxx.html`,优雅地复制 前言 在浏览网页的时候,有的网页内容无法复制。比如「360

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

起点中文网防止网页调试的代码展示

起点中文网对爬虫非常敏感。如图,想在页面启用调试后会显示“已在调试程序中暂停”。 选择停用断点并继续运行后会造成cpu占用率升高电脑卡顿。 经简单分析网站使用了js代码用于防止调试并在强制继续运行后造成电脑卡顿,代码如下: function A(A, B) {if (null != B && "undefined" != typeof Symbol && B[Symbol.hasInstan

(入门篇)JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能,而 JavaScript 作为前端三大基础之一,更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例,带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中,都看到过这种轮播图。它的核心功能是展示多张图片,并且用户可以通过点击按钮,左右切换图片。

【IPV6从入门到起飞】4-RTMP推流,ffmpeg拉流,纯HTML网页HLS实时直播

【IPV6从入门到起飞】4-RTMP推流,ffmpeg拉流,纯HTML网页HLS实时直播 1 背景2 搭建rtmp服务器2.1 nginx方案搭建2.1.1 windows 配置2.1.2 linux 配置 2.2 Docker方案搭建2.2.1 docker 下载2.2.2 宝塔软件商店下载 3 rtmp推流3.1 EV录屏推流3.2 OBS Studio推流 4 ffmpeg拉流转格式

【Qt】Qt与Html网页进行数据交互

前言:此项目使用达梦数据库,以Qt制作服务器,Html制作网页客户端界面,可以通过任意浏览器访问。 1、Qt与网页进行数据交互 1.1、第一步:准备qwebchannel.js文件 直接在qt的安装路径里复制即可 1.2、第二步:在Qt的.pro文件加载webchannel组件 在.pro文件添加如下组件: QT += core gui sql webchannel wi

浅析网页不安装插件播放RTSP/FLV视频的方法

早期很多摄像头视频流使用的是RTSP、RTMP协议,播放这类协议的视频通常是在网页上安装插件。但现在越来越多的用户,对于网页安装插件比较反感,且随着移动设备的普及,用户更多的希望使用手机、平板等移动设备,直接可以查看这些协议的视频。那是否有什么方案可以直接网页打开RTSP、RTMP协议的视频,直接观看不用安装插件呢?而且对于摄像头的数据,尽可能低延迟的获取实时画面。  其实很多摄像头厂家也注意到