grid system 网页设计 第1篇
对于网页中的图片建议用一些常见的比例,如:1:1、4:3、16:9、7:5、3:2、16:10、21:9,
、7:5等
好了,就这些,栅格系统还需大家到实际项目中去实践,用了就离不开他,用了他你好大家好。
参考文献:
[1]商业-温总.你的布局设定方法靠谱吗?[J].腾讯ISUX
[2]栅格化系统学习和应用[J].前端开发博客
[3] 栅格系统-详解[J]. Kiatusikaku
这是个人的第一篇文章关于网页布局的栅格,本文未经过权威认证,纯是个人理解欢迎大家批评指正。下一篇将详细讲解<实用网页&移动端设计规范整理>。写文章是为了更好的总结,希望也能给你带来学习价值。
grid system 网页设计 第2篇
当我们用已知想做的宽度的时候,可以用这种栅格
假设W=1200,i=30(10的倍数),n=12
W=(a+i)*n
1200=(a+30)*12
a=70
例如1、<人人都是产品经理>采用这种栅格,(所有内容皆在版心1200px内,图片内容块是A的倍数,多数内容间距30px,根据内容灵活应用栅格)
grid system 网页设计 第3篇
假设W=1200,i=10(10的倍数),n=12
W=(a+i)*n-i
1200+10=(a+10)*12
a约等于90
所以W=(90+10)*12-10=1190
所以这种等分方式是最接近1200屏幕需求
例如:淘宝,天猫,京东
W=(90+10)*12-10=1190
1180版心:
W=1180,i=20(10的倍数),n=12,a=80
W=(80+20)*12-20=1180
例如:UI中国