栅格化并不是一个新的概念,大家关注的点往往是他表面的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这个结果。
W = A * n – i;
A = a + i;
i:被分割的区块之间的间隔(为了方便计算,大都为10px)
整个公示中,i和n一样是核心,再确定i,即可确定整个栅格化系统。
当n = 24, i = 10;假如A=40,则W=950;假如A=50,则W=1190;假如A=60,则W=1430
虽然A的值可以变成“任何”一个值,但有观点认为栅格化仍然是不太适合弹性布局。因为弹性布局的关键在用百分数单位来替代像素的单位,用百分数来表示无法整出100的分割方案。
好像如果在界面中有5等分的需求,整个栅格化系统将变得复杂[3,5,8],也就是120等分。但其实并不需要如此,因为i并没有改变,只是把a缩小,但对于24等分的下的组合并没有产生变化。所以只需要设置每个A为20%,然后每个A的右测内边距为10即可以融入原来的24分的栅格化系统。
热门评论
总结的更详细,讲解的更清楚