柵格化-網頁-移動端
時間：2023-09-06 01:00:01 | 來源：網站運營
時間：2023-09-06 01:00:01 來源：網站運營
柵格化-網頁-移動端：最近看了一下ant design 和material design 平臺的柵格，在柵格內容上劃分的，總結一了一些個人的新的，不足之處多多指正：
ant design：
基準像素：8px，一次類推：8n 的倍數，這樣子好處8能被大部分網頁分辨率整除，不會出現小數。
在19年6月份之前，16px 間距比較通用，之后改版中，間距發(fā)現調整成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柵格
移動端柵格：
在線咨詢
