阿里裝修托管
微信人工客服 |
深圳做網站網頁規劃之柵格體系
發布日期：2019-06-14 關鍵詞:深圳做網站網頁規劃之柵格體系 已有 2998 人瀏覽
01、柵格體系的形成
柵格體系（Grid system）最早運用在17世紀末的法國印刷業，出版業。
維基百科對其界說為：柵格規劃體系（又稱網格規劃體系、規范尺度體系、程序版面規劃、瑞士平面規劃風格、國際主義平面規劃風格），是一種平面規劃的辦法與風格。
深圳做網站告訴大家網頁柵格體系是有平面柵格體系中開展而來，以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。
02、柵格體系的原理
柵格體系能夠按柵格數分為12列，16列，24列等，能夠自由規劃柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區塊寬度為W，A代表一個柵格單元的寬度，a代表一個柵格的寬度，i為柵格與柵格之間的距離，n為正整數，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
（A*n）-i = W
這個公式表述了網頁的布局與網頁背后柵格體系之間的聯系。來觀察經典的yahoo事例：
Yahoo的網站頁面寬度為W=950px，每個區塊與區塊的距離為i=10px；假如運用上面的公式，能夠推出A=40px，既Yahoo主頁橫向版式規劃選用的柵格體系為：（40×n）- 10 = W。只需確保一個橫向維度的各個區塊的n值相加等于24，即可確保頁面的寬度一定是950px，950px的寬度也剛好便是當n=24的時分，W的寬度值。
03、經典960柵格
規劃師們偏愛用蘋果體系做規劃，蘋果下瀏覽器的默認寬度為960px, 在 1024 x 768 的分辨率下，咱們再翻開Firefox，天然狀態下，Firefox窗體的巨細約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實踐巨細為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣呈現了。960只是個符號，并不是規范數。
上面列舉的都是大型門戶網站，它們的主頁寬度為950px/960px。除了微軟的Live Search。依據上面的簡單剖析能夠以為：當建立頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px。為什么要選擇這個寬度呢？咱們從數學著手：960能夠分解為2的6次方乘以3和5, 這使得960能夠分割成以下寬度的整數倍：
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
共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960本身），咱們標記為：
N(960) = N(2^6 * 3 * 5) = 26
依據上面的算法，能夠得到：
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
N越大，可組合的寬度值就越多。對柵格體系來說，這意味著越靈活。
現在絕大多數顯示器都支持 1024 x 768 及其以上分辨率。為了有用的運用屏幕寬度同時確保柵格的靈活度，能夠看出960是非常合適的。這樣，在現在主流顯示器下，960就成為網頁柵格體系中的最佳寬度了，或許不久的將來，將會盛行1440。
04、運用柵格體系的優勢
關于規劃師來說，柵格體系更多的是一種布局思維，能夠更有邏輯地進行規劃工作。靈活地運用柵格體系，不只能夠讓整個網站各個頁面的布局保持一致，讓網頁的信息呈現愈加漂亮易讀，讓規劃稿有更好的結構，更能夠經過匹配不同組合，做出許多優秀和共同的排版規劃。
運用網格體系，能夠使網頁規劃給用戶正式感和規范感，還具有一種結構分明的規劃感，提升用戶體驗。網格體系不意味著安分守己，一味依照網格線來進行布局。網格體系的含義在于更靈活的幫助規劃師有序布局，而不是約束規劃師的規劃。
關于前端開發人員來說，柵格體系的運用，給整個網站的頁面結構界說了一個規范，大大提高了網頁的規范性。在柵格體系下，頁面中所有組件的尺度都是有規則的，可重用的，這關于大型網站的開發和保護來說，能節約不少本錢。
隨著呼應式規劃的盛行，柵格體系開始被賦予新的含義，那便是，一種呼應式規劃的實現方法。呼應式的關鍵是為同一個頁面規劃多種布局形態，別離適配不同屏幕尺度的設備。
能夠看到，一個頁面能夠拆分紅多個區塊來了解，而正是這些區塊共同構成了這個頁面的布局。依據不同的屏幕尺度狀況，調整這些區塊的排版，就能夠實現呼應式規劃。而借助柵格體系，規劃與前端開發人員能夠很簡單的規劃和創建呼應式的頁面布局。
柵格體系是一種格式化的規劃工具，運用柵格體系是一種好的習慣，規劃師能夠更專注于內容呈上，更專注于著重要點。當然，規則是用來打破的，深圳做網站覺得當咱們了解了布局的理念，掌握了柵格的方法之后，也無需拘泥于柵格的方式，能夠對其“革新”，進行立異。
柵格體系（Grid system）最早運用在17世紀末的法國印刷業，出版業。
維基百科對其界說為：柵格規劃體系（又稱網格規劃體系、規范尺度體系、程序版面規劃、瑞士平面規劃風格、國際主義平面規劃風格），是一種平面規劃的辦法與風格。
深圳做網站告訴大家網頁柵格體系是有平面柵格體系中開展而來，以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。
02、柵格體系的原理
柵格體系能夠按柵格數分為12列，16列，24列等，能夠自由規劃柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區塊寬度為W，A代表一個柵格單元的寬度，a代表一個柵格的寬度，i為柵格與柵格之間的距離，n為正整數，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
（A*n）-i = W
這個公式表述了網頁的布局與網頁背后柵格體系之間的聯系。來觀察經典的yahoo事例：
Yahoo的網站頁面寬度為W=950px，每個區塊與區塊的距離為i=10px；假如運用上面的公式，能夠推出A=40px，既Yahoo主頁橫向版式規劃選用的柵格體系為：（40×n）- 10 = W。只需確保一個橫向維度的各個區塊的n值相加等于24，即可確保頁面的寬度一定是950px，950px的寬度也剛好便是當n=24的時分，W的寬度值。
在柵格體系中，規劃師依據需要指定不同的版式或者區分區塊改動A和i的值進行規劃，這樣，一個柵格體系的運用就從此開始了。
03、經典960柵格
規劃師們偏愛用蘋果體系做規劃，蘋果下瀏覽器的默認寬度為960px, 在 1024 x 768 的分辨率下，咱們再翻開Firefox，天然狀態下，Firefox窗體的巨細約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實踐巨細為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣呈現了。960只是個符號，并不是規范數。
上面列舉的都是大型門戶網站，它們的主頁寬度為950px/960px。除了微軟的Live Search。依據上面的簡單剖析能夠以為：當建立頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px。為什么要選擇這個寬度呢？咱們從數學著手：960能夠分解為2的6次方乘以3和5, 這使得960能夠分割成以下寬度的整數倍：
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
共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960本身），咱們標記為：
N(960) = N(2^6 * 3 * 5) = 26
依據上面的算法，能夠得到：
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
N越大，可組合的寬度值就越多。對柵格體系來說，這意味著越靈活。
現在絕大多數顯示器都支持 1024 x 768 及其以上分辨率。為了有用的運用屏幕寬度同時確保柵格的靈活度，能夠看出960是非常合適的。這樣，在現在主流顯示器下，960就成為網頁柵格體系中的最佳寬度了，或許不久的將來，將會盛行1440。
04、運用柵格體系的優勢
關于規劃師來說，柵格體系更多的是一種布局思維，能夠更有邏輯地進行規劃工作。靈活地運用柵格體系，不只能夠讓整個網站各個頁面的布局保持一致，讓網頁的信息呈現愈加漂亮易讀，讓規劃稿有更好的結構，更能夠經過匹配不同組合，做出許多優秀和共同的排版規劃。
運用網格體系，能夠使網頁規劃給用戶正式感和規范感，還具有一種結構分明的規劃感，提升用戶體驗。網格體系不意味著安分守己，一味依照網格線來進行布局。網格體系的含義在于更靈活的幫助規劃師有序布局，而不是約束規劃師的規劃。
關于前端開發人員來說，柵格體系的運用，給整個網站的頁面結構界說了一個規范，大大提高了網頁的規范性。在柵格體系下，頁面中所有組件的尺度都是有規則的，可重用的，這關于大型網站的開發和保護來說，能節約不少本錢。
隨著呼應式規劃的盛行，柵格體系開始被賦予新的含義，那便是，一種呼應式規劃的實現方法。呼應式的關鍵是為同一個頁面規劃多種布局形態，別離適配不同屏幕尺度的設備。
能夠看到，一個頁面能夠拆分紅多個區塊來了解，而正是這些區塊共同構成了這個頁面的布局。依據不同的屏幕尺度狀況，調整這些區塊的排版，就能夠實現呼應式規劃。而借助柵格體系，規劃與前端開發人員能夠很簡單的規劃和創建呼應式的頁面布局。
柵格體系是一種格式化的規劃工具，運用柵格體系是一種好的習慣，規劃師能夠更專注于內容呈上，更專注于著重要點。當然，規則是用來打破的，深圳做網站覺得當咱們了解了布局的理念，掌握了柵格的方法之后，也無需拘泥于柵格的方式，能夠對其“革新”，進行立異。
注：本文來自深一集團原創或轉截 http://www.gzdxdb.cn/newslist_6916_2.html 如需轉載，請注明出處！
上一條：深圳做網站網頁設計標準制造的技巧
下一條：深圳做網站網頁規劃色彩運用技巧
專注設計14年
深一云服務器
拒絕不當利
500強企業網
10000家客戶案
83位技術團隊
只做有排名
200人服務團隊
