阿里装修托管
微信人工客服 |
深圳做网站网页规划之栅格体系
发布日期：2019-06-14 关键词:深圳做网站网页规划之栅格体系 已有 2699 人浏览
01、栅格体系的形成
栅格体系（Grid system）最早运用在17世纪末的法国印刷业，出版业。
维基百科对其界说为：栅格规划体系（又称网格规划体系、规范尺度体系、程序版面规划、瑞士平面规划风格、国际主义平面规划风格），是一种平面规划的办法与风格。
深圳做网站告诉大家网页栅格体系是有平面栅格体系中开展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
02、栅格体系的原理
栅格体系能够按栅格数分为12列，16列，24列等，能够自由规划栅格宽度和栅格与栅格间宽度。如下图所示，记页面或区块宽度为W，A代表一个栅格单元的宽度，a代表一个栅格的宽度，i为栅格与栅格之间的距离，n为正整数，则有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
（A*n）-i = W
这个公式表述了网页的布局与网页背后栅格体系之间的联系。来观察经典的yahoo事例：
Yahoo的网站页面宽度为W=950px，每个区块与区块的距离为i=10px；假如运用上面的公式，能够推出A=40px，既Yahoo主页横向版式规划选用的栅格体系为：（40×n）- 10 = W。只需确保一个横向维度的各个区块的n值相加等于24，即可确保页面的宽度一定是950px，950px的宽度也刚好便是当n=24的时分，W的宽度值。
03、经典960栅格
规划师们偏爱用苹果体系做规划，苹果下浏览器的默认宽度为960px, 在 1024 x 768 的分辨率下，咱们再翻开Firefox，天然状态下，Firefox窗体的巨细约为 974 x 650. 减掉左右两边7px的边框，网页的实践巨细为上图中的红色部分，高宽为 960 x 650.有趣的960就这样呈现了。960只是个符号，并不是规范数。
上面列举的都是大型门户网站，它们的主页宽度为950px/960px。除了微软的Live Search。依据上面的简单剖析能够以为：当建立页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px。为什么要选择这个宽度呢？咱们从数学着手：960能够分解为2的6次方乘以3和5, 这使得960能够分割成以下宽度的整数倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960本身），咱们标记为：
N(960) = N(2^6 * 3 * 5) = 26
依据上面的算法，能够得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
N越大，可组合的宽度值就越多。对栅格体系来说，这意味着越灵活。
现在绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有用的运用屏幕宽度同时确保栅格的灵活度，能够看出960是非常合适的。这样，在现在主流显示器下，960就成为网页栅格体系中的最佳宽度了，或许不久的将来，将会盛行1440。
04、运用栅格体系的优势
关于规划师来说，栅格体系更多的是一种布局思维，能够更有逻辑地进行规划工作。灵活地运用栅格体系，不只能够让整个网站各个页面的布局保持一致，让网页的信息呈现愈加漂亮易读，让规划稿有更好的结构，更能够经过匹配不同组合，做出许多优秀和共同的排版规划。
运用网格体系，能够使网页规划给用户正式感和规范感，还具有一种结构分明的规划感，提升用户体验。网格体系不意味着安分守己，一味依照网格线来进行布局。网格体系的含义在于更灵活的帮助规划师有序布局，而不是约束规划师的规划。
关于前端开发人员来说，栅格体系的运用，给整个网站的页面结构界说了一个规范，大大提高了网页的规范性。在栅格体系下，页面中所有组件的尺度都是有规则的，可重用的，这关于大型网站的开发和保护来说，能节约不少本钱。
随着呼应式规划的盛行，栅格体系开始被赋予新的含义，那便是，一种呼应式规划的实现方法。呼应式的关键是为同一个页面规划多种布局形态，别离适配不同屏幕尺度的设备。
能够看到，一个页面能够拆分红多个区块来了解，而正是这些区块共同构成了这个页面的布局。依据不同的屏幕尺度状况，调整这些区块的排版，就能够实现呼应式规划。而借助栅格体系，规划与前端开发人员能够很简单的规划和创建呼应式的页面布局。
栅格体系是一种格式化的规划工具，运用栅格体系是一种好的习惯，规划师能够更专注于内容呈上，更专注于着重要点。当然，规则是用来打破的，深圳做网站觉得当咱们了解了布局的理念，掌握了栅格的方法之后，也无需拘泥于栅格的方式，能够对其“革新”，进行立异。
栅格体系（Grid system）最早运用在17世纪末的法国印刷业，出版业。
维基百科对其界说为：栅格规划体系（又称网格规划体系、规范尺度体系、程序版面规划、瑞士平面规划风格、国际主义平面规划风格），是一种平面规划的办法与风格。
深圳做网站告诉大家网页栅格体系是有平面栅格体系中开展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
02、栅格体系的原理
栅格体系能够按栅格数分为12列，16列，24列等，能够自由规划栅格宽度和栅格与栅格间宽度。如下图所示，记页面或区块宽度为W，A代表一个栅格单元的宽度，a代表一个栅格的宽度，i为栅格与栅格之间的距离，n为正整数，则有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
（A*n）-i = W
这个公式表述了网页的布局与网页背后栅格体系之间的联系。来观察经典的yahoo事例：
Yahoo的网站页面宽度为W=950px，每个区块与区块的距离为i=10px；假如运用上面的公式，能够推出A=40px，既Yahoo主页横向版式规划选用的栅格体系为：（40×n）- 10 = W。只需确保一个横向维度的各个区块的n值相加等于24，即可确保页面的宽度一定是950px，950px的宽度也刚好便是当n=24的时分，W的宽度值。
在栅格体系中，规划师依据需要指定不同的版式或者区分区块改动A和i的值进行规划，这样，一个栅格体系的运用就从此开始了。
03、经典960栅格
规划师们偏爱用苹果体系做规划，苹果下浏览器的默认宽度为960px, 在 1024 x 768 的分辨率下，咱们再翻开Firefox，天然状态下，Firefox窗体的巨细约为 974 x 650. 减掉左右两边7px的边框，网页的实践巨细为上图中的红色部分，高宽为 960 x 650.有趣的960就这样呈现了。960只是个符号，并不是规范数。
上面列举的都是大型门户网站，它们的主页宽度为950px/960px。除了微软的Live Search。依据上面的简单剖析能够以为：当建立页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px。为什么要选择这个宽度呢？咱们从数学着手：960能够分解为2的6次方乘以3和5, 这使得960能够分割成以下宽度的整数倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960本身），咱们标记为：
N(960) = N(2^6 * 3 * 5) = 26
依据上面的算法，能够得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
N越大，可组合的宽度值就越多。对栅格体系来说，这意味着越灵活。
现在绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有用的运用屏幕宽度同时确保栅格的灵活度，能够看出960是非常合适的。这样，在现在主流显示器下，960就成为网页栅格体系中的最佳宽度了，或许不久的将来，将会盛行1440。
04、运用栅格体系的优势
关于规划师来说，栅格体系更多的是一种布局思维，能够更有逻辑地进行规划工作。灵活地运用栅格体系，不只能够让整个网站各个页面的布局保持一致，让网页的信息呈现愈加漂亮易读，让规划稿有更好的结构，更能够经过匹配不同组合，做出许多优秀和共同的排版规划。
运用网格体系，能够使网页规划给用户正式感和规范感，还具有一种结构分明的规划感，提升用户体验。网格体系不意味着安分守己，一味依照网格线来进行布局。网格体系的含义在于更灵活的帮助规划师有序布局，而不是约束规划师的规划。
关于前端开发人员来说，栅格体系的运用，给整个网站的页面结构界说了一个规范，大大提高了网页的规范性。在栅格体系下，页面中所有组件的尺度都是有规则的，可重用的，这关于大型网站的开发和保护来说，能节约不少本钱。
随着呼应式规划的盛行，栅格体系开始被赋予新的含义，那便是，一种呼应式规划的实现方法。呼应式的关键是为同一个页面规划多种布局形态，别离适配不同屏幕尺度的设备。
能够看到，一个页面能够拆分红多个区块来了解，而正是这些区块共同构成了这个页面的布局。依据不同的屏幕尺度状况，调整这些区块的排版，就能够实现呼应式规划。而借助栅格体系，规划与前端开发人员能够很简单的规划和创建呼应式的页面布局。
栅格体系是一种格式化的规划工具，运用栅格体系是一种好的习惯，规划师能够更专注于内容呈上，更专注于着重要点。当然，规则是用来打破的，深圳做网站觉得当咱们了解了布局的理念，掌握了栅格的方法之后，也无需拘泥于栅格的方式，能够对其“革新”，进行立异。
上一条：深圳做网站网页设计标准制造的技巧
下一条：深圳做网站网页规划色彩运用技巧
专注设计14年
深一云服务器
拒绝不当利
500强企业网
10000家客户案
83位技术团队
只做有排名
200人服务团队
