关于B端栅格那些事
Hi大家好呀这里是喂鱼，今天总结了一些B端关于栅格的思路，希望可以帮助到大家～
关于B端栅格那些事
Hi大家好呀这里是喂鱼，今天总结了一些B端关于栅格的思路，希望可以帮助到大家～
前言：
在B端后台中，栅格系统已经成为不可或缺的东西。
熟练运用栅格系统：
让界面更加工整规范化，提高了页面布局的一致性跟复用性。
也让页面设计变得有规律，降低了决策成本以及和开发的沟通成本。
本篇文章分享内容：
间距与栅格密不可分
栅格的组成部分
栅格在系统中的位置
栅格计算公式
如何运用栅格让界面更规整
版心如何设置
1. 间距与栅格密不可分
在谈栅格系统之前，需要给大家先讲讲B端的间距，它也是和栅格系统密不可分，了解间距会让你更好理解栅格系统。
首先给大家看张图，市面上大部分屏幕的分辨率占比：
或许你已经可以看到整除率最高的是4&8的倍数。
我们一般采用8的倍数：
8、16、24、32、40、48、56、64、72...
特殊情况可以定义为8的1/2、3/2
PS：不选择4的倍数，是因为太多间距显得就没有规范了，且拉不开差距。
关于栅格：
栅格系统英文为“grid systems”
类似于小时候写字的方格本，它起到的作用就是让你就算字写的很难看，但最起码你可以在这个方格里写规整。
2.栅格的组成部分：
栏
水槽
页边距
3.栅格在系统中的位置
接下来我们需要了解栅格是在B端后台中的内容层：
4.栅格计算公式
内容层是24栏+23水槽+2页边距组成的
所以计算出每个栏大小的公式：
例如：
1080x1920
导航菜单：208「导航菜单宽度可自定，8倍数」
内容层：1920-208(导航菜单)=1712
那么：
(1712-24*2-23*16)除以24=54
得到每栏大小54
5.如何运用栅格让界面更规整
大家可以对比以下图：
栅格的好处：
Web端布局更加灵活。
视觉一致性，保证元素之间的节奏。
减少出现奇像素偏移造成模糊。
开发更容易理解的数字8。
一般会有所说的12栅格和24栅格
新手建议果断选24栅格。12栅格能做的事情24栅格也能做，但24栅格能做的，12栅格未必可以。
接下来实战范例：
这个界面划分的非常不工整，那么我们只需要找到一行中最多的块。相当于找到页面中最小的那个分子。
下面最多的是4块，那么你就可以想到用4等分去划分。
我们用总24栏除以4得出6
固：最小一份是6栏
算三分的时候，只需要减去旁边的6栏，剩下的栏分成2份就可：
24栏减去6栏除以2等于9栏
如果你做的是响应式的页面，你最好做比例标注：
3等分6:9:9简化成2:3:3
4等分6:6:6:6简化成2:2:2:2
6.版心如何设置
像站酷这种就是版心，版心一般适合于官网
版心+页边距=内容区
版心可以选择固定，也可以响应式
响应式布局：容器大小随窗口大小而变化。
自适应布局：容器大小不随窗口大小而变化，边距随窗口大小而变化。
响应式设计要点
响应式页面中的容器大小是动态的，当屏幕小于等于版心+最小页边距的时，随着窗口大小而变化，可以设置区间的临界点，就是「断点」。
可以看到Apple官网有两次断点
断点是反映页面发生突变的情况的，如边距开始发生变化、容器数量开始发生变化等
如何设置断点
容器宽度和容器内容相关，我们可以规定正常情况下容器宽度最小400，以保证封面图和标题文字还能被看清。当容器宽度被压到400时，容器数量减少一个。
我们有了最小容器，那么就可以得出页面宽度的断点了
1个容器下：
容器x1+边距x2
2个容器下：
容器x2+间距+边距x2
3个容器下：
容器x3+间距x2+边距x2
...
6个容器下：
容器x6+间距x5+边距x2+侧边栏x2
「页面超过设定的最小版心时，增加侧边栏的距离」
往小的拉伸是容器小于400就减少
往大了拉伸时，当界面已经到达到可以加一个容器的最小值时
总结：
1.一定请记住8的倍数和栅格的计算公式
内容层宽度-左右的页边距-23个水槽再除以24
2.高分屏的实际效果
横向分辨率达到3840px 的PC高分屏中，主流浏览器会按照2倍图展示内容。此外，Windows系统下有系统缩放，推荐的是1.25倍，导致3840px的屏幕宽度，浏览器认为只有1536px (3840px÷2÷1.25)。所以有时候会出现在分辨率很高的屏幕下，响应式页面展示的内容反而更少了的情况。
Q1:如果卡片宽度不一致怎么划分
答：这是可以灵活变通的哦，参考以下图。
好啦，以上就是这期分享的全部内容。
谢谢大家能够看到这里，如果能帮助到你我会很开心。后续我将继续总结输出更多优质的内容。
我是猫界首席按摩师的喂鱼，咱们下期见！
