为什么栅格系统以8为基数？好处有哪些？
其实栅格在各个平台开发布局中都有所定义。
通俗介绍 简单了解一下开发布局中栅格的变革
Web端最常见的布局 Bootstrap ；
它是Twitter的设计师Mark Otto和Jacob Thornton合作开发的一款强大的前端框架，至今仍被广泛使用，已经更新到V4版本了。
Bootstrap 中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。
它将系统分为12列，当然也可以通过变量来改变列数和列宽，水槽宽度，屏幕浮动宽度；
其实设置屏幕浮动宽度就是我们看到的屏幕自适应，就是根据屏幕宽度来选择显示参数。
Bootstrap 中的栅格流只能作为大的布局定义，那么针对最小单位是该用8、10、15还是多少也是需要根据需求去做分析。
iOS布局方式很多，常用的可以归纳为 Frame、Autoresizing、Constraint、StackView 和 Masonry 五种；
其中，
Frame 用来描述UIView的位置和大小；
Autoresizing 早期用来适配屏幕；
Constraint 比 Autoresizing 更加灵活，适配效果更好；
了解一下，
StackView 它是iOS9时新增的一个视图类，可以把它理解成一个容器，添加到容器内的控件可以按照行或列进行布局。
Masonry 是一个轻量级的布局框架，是基于 NSLayoutConstraint 的一种第三方框架；通俗来讲用它实现适配布局更简洁更轻量。
先简单了解一下Android开发中的六大基本布局
LinearLayout 线性布局：最常用的以垂直和水平方向的布局方式
RelativeLayout 相对布局：可以基于父或兄弟控件来布局
FrameLayout 层布局：就是控件盖控件的那种布局方式
AbsoluteLayout 绝对布局：基于绝对坐标xy布局，无法自适应
了解一下，
TableLayout 表格布局：多行多列的布局方式
GridLayout 网格布局：以网格的方式进行布局
在引入的表格布局和网格布局中其实就是为了更加方便系统栅格化
根据以上内容对于三大平台的常用布局做一个简单的分析
总结：
Web端引入的Bootstrap、Android端的表格和网格布局以及iOS9之后引入的Stachview和Masonry都是为了能更好的适配以及进行系统的栅格布局；
也体现了设计中需要栅格定义的重要性。
以上布局框架仅是从开发层面的一个布局演变
看到过很多关于栅格布局的文章，现在理解觉得有些片面，可能仅是作为从设计的角度去理解， 很多的栅格方式都是从平面排版设计中的栅格演变过来的，基数可能比较随性，并且没有严格贴合系统去做。
站在巨人的肩膀上，还是从这三大平台来看，看一下官方给出的建议。
简单看一下Bootstrap的栅格参数， 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
由表知Bootstrap的默认水槽宽度是30px(每列左右是15px)，当然这些是可自定义的，Bootstrap的主要目的是为了适配屏幕进行自适应布局；
我们设计时设置栅格的时候大多数情况下是以非自适应网页来做的栅格，栅格最小单位一般是10，15等不定参数；
虽然Web端的可视范围比较大浏览方式和移动端不一样，
但是我们发现针对一些内容较多的网页或者说对卡片内的信息去做布局，基数是10或15就会很难呈现出想要的效果。
以8为基数的栅格系统渐渐被使用，以8为基数 好在哪里？
之前国外的一个博客中( spec.fm *一个开发者和设计师共同搭建的博客，设计细节中会从多个纬度去考量)， 有 一篇文章 提到过使用8点栅格的好处。
总结一下他们在Web端分析出的好处点有哪些；
Bootstrap或其他的框架只作为一个大的布局系统，对于设计 没有一个设计单位去衡量 排版很难一致性，使用8点的好处在哪：
对于设计： 效率， 减少决策 ，同时能 保持元素之间的节奏 。
对于团队： 开发人员 更容易理解 ，在开发眼里8更有说服性。
对于用户： 一致审美 ，减少设备上出现模糊的 半像素偏移 问题。
我们来看iOS的 Human Interface Guidelines 如何去给出布局建议。
iOS是个封闭的系统，在 Human Interface Guidelines 可以看到iOS使用Auto Layout自动布局，iOS的系统完全自主更新，终端设备也完全由自己决定，因此系统可以做到强制规范化。但在这里提到的基数也是 8 。
在布局中说到的约束，就是我们来定义的栅格基数，他给的建议也是 8 。
下边我们找一下iOS官方组件，看一下自适应布局的限制区域是不是基数 8 。
在Sketch中置入一个iOS官方页面组件将其拆解：
其实我们发现在iOS系统设计中的基数也是以8为基准。
上边说到的 Spec.fm 中的那篇文章中有提到Points，关于iOS的@1x，@2x，@3x图，用 8 为基数可减少出现是奇数造成一像素偏移模糊的情况。
Android端的 Material Design 布局给出的建议。
在 Material Design 给出的建议中是以8dp为基准，小的控件以4dp为基准。
Material Design 定义的栅格布局更像Bootstrap，它可以适应多平台，结合它丰富的视觉语言能搭建出更加严谨的移动应用或网页。
站在巨人的肩膀上
从以上三大平台来看，移动端官方给出的建议都是以8为基准。
从以上分析 我个人觉得，
从系统的角度，首先要保证是偶数；只研究移动端平台： 2、4、6、8、10 ；
其实 我觉得用2的次方计算会更加贴合： 2^1、2^2、2^3、2^4 : 2、4、8、16 ；
在这些数字中2作为基数太小了我们视觉能看到的2个点太小，并且使用起来很麻烦每次都要进行计算；
那么10或16作为基数又太大了，在移动端很难避免信息过多小屏幕需要考虑排版的问题；
取在这两组数中的交集还剩下 4 和 8 ；
以上Material Design给出的建议中也是以8为基准，小的控件以4为基准。
从很多角度来看 8 点栅格是最为理想的栅格基础单位
下面再总结一下8点栅格的好处：
1、Web端布局更加灵活。
2、视觉一致性，保证元素之间的节奏。
3、减少出现奇像素偏移造成模糊。
4、开发更容易理解的数字8。
5、能被最多的屏幕尺寸整除适配，这也是Material Design和iOS建议的主要原因之一。
END / THX
bootstrap栅格系统是什么意思
通过这种形式，就能很方便地使用栅格系统定制自己的应用布局了。其他信息除了以上的使用方法之外，还能使用“列偏移类”来快速对自己的栅格进行定位，使用方法类似按照这样的写法，这个div就会在pc端向右偏移 3列。更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！
如何建立设计语言系统
而且,某些平台,如MaterialDesign,专门使用4点或8点的网格,使得该系统非常合适。 在定义我们自己的栅格系统的过程中,为了部分排版更加的灵活,我们将最小的单位增量为4,这样让设计师有了更多的可能性,在一些细小模块的处理上能变得更加灵活,限制性更小,如下图。 图标 当一个界面完全由文本构成时,阅读和评估每个单词...
Bootstrap的正负是怎么解释的?
在 Bootstrap 的栅格系统中，"正负" 表示相对于页面的宽度而言，列的大小。"正" 表示列的宽度增加，"负" 表示列的宽度减少。例如：- `.col-md-4`：表示一个占据页面宽度的四分之一的列。- `.col-md-8`：表示一个占据页面宽度的四分之三的列。- `.col-md-offset-2`：表示将列向右偏移两...
布局容器和栅格网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平...
40款为响应式网站而生的栅格神器分享
8、ONE% CSS栅格 ONE%CSS栅格系统是由12栏灵活可变的CSS栅格组成的。它被设计为快速构建响应式网页的工具，方便快捷。你无需反复调整尺寸和边缘，一个ONE%CSS帮你搞定一切。9、BOURBON NEAT 这是在Bourbon基础上建立的开源自适应栅格框架，旨在创建灵活好用的栅格系统，以构建响应式网站。10、KUBE CSS ...
到底什么是UI设计规范
UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试\/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。UI设计...
bootstrap4栅格系统定义了几种屏幕大小
5种。栅格系统是基于一个12列、有5种响应尺寸(对应不同的屏幕）的布局。Bootstrap4栅格系统共有五个类：1.col- 针对所有设备。2.col-sm- 平板 - 屏幕宽度等于或大于 576px。3.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)4.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)5.col-...
栅格系统的简介
不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。网页设计中的栅格系统我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及...
bootstrap是怎么实现栅格系统的
1、栅格选项 bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、...
bootstrap为什么会使用栅格系统,而不是别的什么系统
实现原理 栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说: Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成...
姬君捷立： 为什么设计师们都不约而同的采用几乎相同的布局尺寸呢?这不是巧合,而是遵循着一个规律——栅格系统. 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事.不过从定义上说,栅格更为准确些,从维基百科查到...
葫芦岛市19426739907： 为什么一定要以数字0开头的为八进制 - ？
姬君捷立： 八进制,Octal,缩写OCT或O,一种以8为基数的计数法,采用0,1,2,3,4,5,6,7八个数字,逢八进1.一些编程语言中常常以数字0开始表明该数字是八进制.八进制的数和二进制数可以按位对应(八进制一位对应二进制三位),因此常应用在计算机语言中.
葫芦岛市19426739907： 1.栅格数据存储的压缩编码有几种?各有什么优点和缺点? - ？
姬君捷立： 2.1.6 栅格数据存储的压缩编码 1 直接编码 直接栅格编码是最简单最直观而又非常重要的一种栅格结构编码方法,通常称这种编码为图像文件或栅格文件.直接编码就是将栅格数据看作一个数据矩阵,逐行(或逐列)逐个记录代码,可以每行都...
葫芦岛市19426739907： 什么是bootstrap栅格系统 - ？
姬君捷立： 什么是栅格系统 栅格系统是指,将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局.Bootstrap的栅格系统采用了1-12列的模式,并且通过比例计算来设置你定义的列宽.例如你这一行想要采用两列的布局模式,那么每列的宽...
葫芦岛市19426739907： bootstrap为什么会使用栅格系统,而不是别的什么系统 - ？
姬君捷立： 实现原理栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案.下面是官方文档中的解说:Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)...
葫芦岛市19426739907： 39 位权与基数的关系是:【 】. - ？
姬君捷立： 位权与基数的关系是各进位制中位权的值是基数的若干次幂
葫芦岛市19426739907： 在卡西欧计算器fx - 991CN X中如何将十进制转换为八进制? - ？
姬君捷立： 在卡西欧计算器fx-991CN X基数模式下,可进行二进制、八进制、十进制和十六进制的计算,同时,计算器也提供多种进制之间的快速转换,从十进制转换成八进制,只需要使用In(OCT)按键即可.若然需要转换到二进制则需要操作 (BIN)按...
葫芦岛市19426739907： 如何设计有效的布局? - ？
姬君捷立： 1. 具有清晰的视觉层次.布局应当让页面各元素之间的关系和重要性一目了然.你可以通过适当使用下列属性来实现视觉层次:焦点:指用户首先关注的区域.形式上被赋予焦点属性的UI元素一定要表达重要的内容.视觉流:指用户关注区域的...
葫芦岛市19426739907： 什么是二进数和八进数 - ？
姬君捷立： 八进制写出的数,我们就简称它是几进数,用十进数写出的数,就叫做十进数.二进数和八进数,就是分别用二进制用几进制写出的数
