01網(wǎng)格系統(tǒng)的形成

　　在17世紀(jì)末，在法國(guó)印刷行業(yè)早期申請(qǐng)網(wǎng)格系統(tǒng)（網(wǎng)格系統(tǒng)）。出版業(yè)。

　　維基百科定義為：網(wǎng)格設(shè)計(jì)系統(tǒng)（也稱為網(wǎng)格設(shè)計(jì)系統(tǒng)， 標(biāo)準(zhǔn)尺寸系統(tǒng)， 節(jié)目地板設(shè)計(jì)， 瑞士設(shè)計(jì)風(fēng)格， 國(guó)際主義平面設(shè)計(jì)風(fēng)格），它是平面設(shè)計(jì)的方法和風(fēng)格。

　　Web柵格系統(tǒng)正在平面網(wǎng)格系統(tǒng)中開發(fā)。指南并在規(guī)則網(wǎng)格陣列中指定網(wǎng)頁(yè)中的布局和信息分布。

　　02.

　　網(wǎng)格系統(tǒng)的原理

　　網(wǎng)格系統(tǒng)可根據(jù)網(wǎng)格數(shù)分為12列。16列，24列， 等等。它可以自由設(shè)計(jì)，以設(shè)計(jì)網(wǎng)格寬度和電網(wǎng)和柵格寬度。如下所示，頁(yè)面或塊寬度為w，a表示光柵單元的寬度，a表示網(wǎng)格的寬度，我是網(wǎng)格和網(wǎng)格之間的距離，n是正整數(shù)，有w =（a * n）+（n-1）* i，由于A = A + I，Servic（A * N）-i = W.

　　（a * n）-i = w

　　此公式顯示了網(wǎng)頁(yè)布局與網(wǎng)頁(yè)后面的網(wǎng)格系統(tǒng)之間的關(guān)系。觀察經(jīng)典的雅虎案：

　　雅虎的網(wǎng)站頁(yè)面寬度w = 950px，每個(gè)塊和塊間隔是i = 10px; 如果應(yīng)用公式，可以推出a = 40px，雅虎家庭橫向印刷設(shè)計(jì)的光柵系統(tǒng)是：（40×N） - 10 = W.只要橫向尺寸的每個(gè)塊的n值等于二十四個(gè)，它將確保頁(yè)面的寬度必須為950px。950px的寬度也只是當(dāng)n = 24時(shí)，w寬度值。

　　在網(wǎng)格系統(tǒng)中，設(shè)計(jì)者設(shè)計(jì)不同的布局或分區(qū)塊以改變A和I的值， 如所須。這樣的，網(wǎng)格系統(tǒng)的應(yīng)用開始。

　　03.

　　經(jīng)典960格

　　設(shè)計(jì)師喜歡與Apple系統(tǒng)設(shè)計(jì)，Apple的默認(rèn)寬度為960px的瀏覽器。 在1024 x 768分辨率下，我們?cè)俅未蜷_Firefox。在自然狀態(tài)，F(xiàn)irefox形式約為974 x 650。 兩側(cè)減少7px的邊界，網(wǎng)頁(yè)的實(shí)際大小是上圖的紅色部分。高和寬度為960 x 650。有趣的960以這種方式出現(xiàn)。960只是一個(gè)符號(hào)，不是標(biāo)準(zhǔn)。

　　上面列出的是一個(gè)大型門戶，主頁(yè)的寬度為950px / 960px。除了微軟的實(shí)時(shí)搜索。根據(jù)上面的簡(jiǎn)單分析， 可以考慮：在使用頁(yè)面結(jié)構(gòu)構(gòu)建復(fù)雜的門戶網(wǎng)站時(shí)，開發(fā)工程師不必將頁(yè)面寬度設(shè)置為950px / 960px。為什么選擇這個(gè)寬度？我們從數(shù)學(xué)開始：960可以分解為2， 乘以3和5， 這允許960分為以下寬度的整數(shù)倍數(shù)：

　　2， 3， 4， 5， 6， 8， 10， 12， 15， 16， 20， 24， 30， 32， 40， 48， 60， 64， 80， 96， 120， 160， 192年， 240， 320， 480.

　　總計(jì)26種（26 = 7 * 2 * 2 - 2， 下部2是刪除1小程序制作哪家好和960本身），我們標(biāo)記：

　　n（960）= n（2 ^ 6 * 3 * 5）= 26

　　根據(jù)上述算法，你可以得到：

　　n（360）= n（2 ^ 3 * 3 ^ 2 * 5）= 22

　　n（480）= n（2 ^ 5 * 3 * 5）= 22

　　n（720）= n（2 ^ 4 * 3 ^ 2 * 5）= 28

　　n（750）= n（2 * 3 * 5 ^ 3）= 14

　　n（800）= n（2 ^ 5 * 5 ^ 2）= 16

　　n（960）= n（2 ^ 6 * 3 * 5）= 26

　　n（1000）= n（2 ^ 3 * 5 ^ 3）= 14

　　n（1024）= n（2 ^ 10）= 9

　　n（1440）= n（2 ^ 6 * 3 ^ 2 * 5）= 34

　　n（1920）= n（2 ^ 7 * 3 * 5）= 30

　　越大，可以組合的寬度值越多。對(duì)于網(wǎng)格系統(tǒng)，這意味著更靈活。

　　大多數(shù)最多顯示支持1024 x 768及更高的分辨率。為了有效地使用屏幕寬度來(lái)確保網(wǎng)格的靈活性，可以看出960非常合適。這樣的，在當(dāng)前的主流顯示器下，960成為網(wǎng)格系統(tǒng)中的最佳寬度，也許是未來(lái)，1440將被填充。

　　企業(yè)定制官網(wǎng)

　　04.

　　使用網(wǎng)格系統(tǒng)的優(yōu)點(diǎn)

　　為設(shè)計(jì)師，網(wǎng)格系統(tǒng)更布局的想法。它可以更邏輯設(shè)計(jì)。靈活使用網(wǎng)格系統(tǒng)，您不僅可以保留整個(gè)網(wǎng)站每頁(yè)的布局嗎？讓有關(guān)網(wǎng)頁(yè)的信息更美麗且易于閱讀。讓Desigenus具有更好的結(jié)構(gòu)。不僅僅是不同的組合，制作很多優(yōu)秀和獨(dú)特的印刷設(shè)計(jì)。

　　使用網(wǎng)格系統(tǒng)，您可以設(shè)計(jì)網(wǎng)頁(yè)以提供用戶的官方和標(biāo)準(zhǔn)感，還有一個(gè)結(jié)構(gòu)獨(dú)特的設(shè)計(jì)，增強(qiáng)用戶體驗(yàn)。網(wǎng)格系統(tǒng)并不意味著規(guī)則，一種味道是基于網(wǎng)格線。網(wǎng)格系統(tǒng)的含義是更靈活的幫助設(shè)計(jì)師有序布局。不要限制設(shè)計(jì)師的設(shè)計(jì)。

　　對(duì)于前端開發(fā)人員，使用網(wǎng)格系統(tǒng)，為整個(gè)網(wǎng)站的頁(yè)面結(jié)構(gòu)定義標(biāo)準(zhǔn)。它大大提高了網(wǎng)頁(yè)的正常性。在網(wǎng)格系統(tǒng)下，頁(yè)面中的所有組件都是常規(guī)的，可重復(fù)使用的，這是為了大型網(wǎng)站的開發(fā)和維護(hù)，可以節(jié)省大量成本。

　　隨著響應(yīng)設(shè)計(jì)的普及，光柵系統(tǒng)開始提供新的意義，那是，響應(yīng)設(shè)計(jì)的實(shí)現(xiàn)。響應(yīng)點(diǎn)是為同一頁(yè)面設(shè)計(jì)各種布局表單。不同屏幕尺寸的設(shè)備， 分別。

　　看得見，頁(yè)面可以分成多個(gè)塊以了解，它是這個(gè)頁(yè)面的聯(lián)合布局在一起。根據(jù)不同的屏幕尺寸，調(diào)整這些塊的排版，可以實(shí)現(xiàn)響應(yīng)設(shè)計(jì)。和光柵系統(tǒng)，設(shè)計(jì)和前端開發(fā)人員可以輕松設(shè)計(jì)并創(chuàng)建響應(yīng)頁(yè)面布局。

　　柵格系統(tǒng)是格式化的設(shè)計(jì)工具。使用網(wǎng)格系統(tǒng)是一種好習(xí)慣，設(shè)計(jì)人員可以更多地關(guān)注內(nèi)容存在，更專注于強(qiáng)調(diào)焦點(diǎn)。當(dāng)然，該規(guī)則用于打破，當(dāng)我們了解布局的概念時(shí)，掌握網(wǎng)格后，也沒(méi)有必要堅(jiān)持網(wǎng)格的形式。可以是“革命”，創(chuàng)新。

　　報(bào)告/反饋