栅格化-网页-移动端

转载

原文地址：https://zhuanlan.zhihu.com/p/79441391

ant design：

基准像素：8px，一次类推：8n 的倍数，这样子好处8能被大部分网页分辨率整除，不会出现小数。

在19年6月份之前，16px 间距比较通用，之后改版中，间距发现调整成24px，24px 即遵从了app 2边留白的距离，移动和web端通用的准则。pc显示屏不断增大，间距增大，也可以能是为了适应当今的大屏幕。

 

起源的鼻祖是从平面印刷而来。随后应用在网页设计当中。根据 ant design 的栅格划分建议：

我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)。

(16+8n) = 栅格的宽度。

 

栅格计算公式：

（16+8n）x 列数 - 8n = 总宽 -留白

（60+20 ）x12 -20 =940 ，为什么不是960，应为2边 各10px的留白。

 

 

网页

960---12栅格： （60+20 ）x12 -20 =940 - 20

12栅格 960宽度

 

960---16栅格： （40+20 ）x16 -20 =940 - 20

16栅格 960宽度