继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

pc端设计规范-第一节概要

慕九州2179714
关注TA
已关注
手记 1
粉丝 2
获赞 0

栅格化并不是一个新的概念,大家关注的点往往是他表面的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分的栅格化系统。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP

热门评论

总结的更详细,讲解的更清楚

查看全部评论