栅格化并不是一个新的概念,大家关注的点往往是他表面的950、960和1190。左边的三个数据的核心是一个24等分的栅格系统。可以被轻松的2等分、3等分、4等分、6等分、8等分、12等分,还可以做到1:2、1:3、1:5、2:4、1:7、3:5的不对称分割,并且可以精确到像素。由于3:5和3等分的需求,所以[3,8]得到了24这个结果。143722fet

板式的变化越复杂,栅格化系统越复杂,就像这个系统最开始被设计的时候:64*36=2304。

在实际操作中,推荐24的栅格化,插入5等分,i=10,最大宽度1430px,最小宽度为950px。CSS采用百分比。

在设计自己产品的栅格化系统大致可以采用下面的流程:

首先分析等份的复杂度,如果版式仅仅是4等份、3等份的话,12列的栅格系统就可以满足需求。如果有较多不等分的可能,那么还是建议采用24列的栅格系统,如上图,这样你可以灵活的设置。

其次确定页面大概的宽度(如何确定在“比例”的部分会详细说明),暂时采用1200px。

然后根据版式的预见性,确定模块和模块之前是否有清晰的“间隔”,这个间隔大概是多少?10px?15px?20px?个人认为认可设计方法都有一个目标是效率的提升,所以个位数个人建议是0或者5的话,方便计算,记忆和检验。当然你也可设置其他的数字,给自己挖坑。

gongzhonghao
关注“小K前端杂谈”,得到更多学习资源