栅格化-网页-移动端
时间：2023-09-06 01:00:01 | 来源：网站运营
时间：2023-09-06 01:00:01 来源：网站运营
栅格化-网页-移动端：最近看了一下ant design 和material design 平台的栅格，在栅格内容上划分的，总结一了一些个人的新的，不足之处多多指正：
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宽度1200栅格
1440栅格
1920栅格
移动端栅格：
在线咨询
