久久久久久国产精品免费免费男同,亚洲精品无码久久久久久久,欧洲精品码一区二区三区免费看

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

6千字，柵格系統(tǒng)使用指南

南設(shè)

2024-05-10

0 評(píng)論 1228 瀏覽 4 收藏

27 分鐘

當(dāng)下，柵格已經(jīng)成為了網(wǎng)頁設(shè)計(jì)和移動(dòng)應(yīng)用設(shè)計(jì)中的重要概念之一。那么，究竟什么是柵格？如何建立、應(yīng)用柵格系統(tǒng)？本文就做了詳細(xì)的闡述和梳理，不妨來看一下。

一、柵格的歷史

可以追溯到古希臘和古羅馬時(shí)期的建筑設(shè)計(jì)中。在建筑設(shè)計(jì)中，柵格是一種用于規(guī)劃和布局建筑物的結(jié)構(gòu)性元素。

在古希臘和古羅馬的建筑設(shè)計(jì)中，建筑師們使用柵格來將建筑物的平面圖分割成等寬的列和行，以便更好地組織和布置建筑物的各個(gè)部分。通過將平面圖分割成柵格，建筑師可以更容易地規(guī)劃建筑物的結(jié)構(gòu)、空間和功能，使得建筑物更具有組織性和美學(xué)感。

隨著時(shí)間的推移，柵格的概念逐漸擴(kuò)展到了其他領(lǐng)域，包括藝術(shù)、設(shè)計(jì)和排版等。在藝術(shù)和設(shè)計(jì)領(lǐng)域，柵格被用來規(guī)劃和布局繪畫、雕塑和其他藝術(shù)作品。在排版領(lǐng)域，柵格被用來將頁面分割成等寬的列和行，以便更好地組織和排列文字、圖像和其他元素。

在20世紀(jì)初期，柵格成為了平面設(shè)計(jì)領(lǐng)域的重要概念之一。設(shè)計(jì)師們開始使用柵格來規(guī)劃和布局平面設(shè)計(jì)作品，包括海報(bào)、雜志和書籍等。通過將設(shè)計(jì)作品分割成柵格，設(shè)計(jì)師可以更好地組織和排列設(shè)計(jì)元素，使得設(shè)計(jì)作品更具有結(jié)構(gòu)性和視覺吸引力。

20世紀(jì)50年代，柵格設(shè)計(jì)系統(tǒng)終于在前西德與瑞士得到完善。通過瑞士平面設(shè)計(jì)雜志的宣傳，將瑞士蘇黎士和巴塞爾兩個(gè)城市的設(shè)計(jì)家從20世紀(jì)40年代探索的成果全面展示，并影響世界各國，因此也被稱為“瑞士平面設(shè)計(jì)風(fēng)格”（SwissDesign）。由于這種風(fēng)格簡單明確，傳達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格，也是國際最流行的風(fēng)格，因此又被稱為“國際主義平面設(shè)計(jì)風(fēng)格”（InternationalTypographicStyle）。

今天，柵格已經(jīng)成為了網(wǎng)頁設(shè)計(jì)和移動(dòng)應(yīng)用設(shè)計(jì)中的重要概念之一。網(wǎng)頁設(shè)計(jì)師和應(yīng)用設(shè)計(jì)師們使用柵格來規(guī)劃和布局網(wǎng)頁和應(yīng)用界面，以確保它們?cè)诓煌O(shè)備上能夠呈現(xiàn)出良好的外觀和用戶體驗(yàn)。

二、什么是柵格

1、建筑學(xué)中的柵格：在建筑設(shè)計(jì)中，柵格通常指的是將建筑物的平面圖分割成等寬的列和行的結(jié)構(gòu)。這種劃分有助于建筑師規(guī)劃建筑物的結(jié)構(gòu)、空間和功能，使其更具組織性和美學(xué)感。

2、平面設(shè)計(jì)中的柵格：在平面設(shè)計(jì)領(lǐng)域，柵格是指將平面圖、海報(bào)或其他設(shè)計(jì)作品的布局分割成等寬的列和行的系統(tǒng)。這種布局系統(tǒng)有助于設(shè)計(jì)師更好地組織和排列設(shè)計(jì)元素，使作品更具結(jié)構(gòu)性和視覺吸引力。

3、網(wǎng)頁設(shè)計(jì)中的柵格：在網(wǎng)頁設(shè)計(jì)中，柵格通常指的是將網(wǎng)頁分割成等寬的列和行的布局系統(tǒng)。這種布局系統(tǒng)有助于設(shè)計(jì)師構(gòu)建響應(yīng)式網(wǎng)頁，確保網(wǎng)頁在不同設(shè)備上呈現(xiàn)出良好的布局和用戶體驗(yàn)。

電子設(shè)備中的柵格：在電子設(shè)備的顯示器上，像素陣列通常被稱為柵格。柵格決定了顯示器上的圖像和文本的分辨率和清晰度。

三、為什么要學(xué)習(xí)柵格系統(tǒng)

1. 用戶層面（Attheuserlevel）

增強(qiáng)視覺一致性，柵格系統(tǒng)通過規(guī)范元素的排列位置和間距，確保頁面上各個(gè)部分在視覺上的一致性。這種一致性可以幫助用戶更好地理解信息，減少了視覺混亂，使設(shè)計(jì)更加簡潔和專業(yè)。

柵格有助于創(chuàng)建清晰、有邏輯的布局，易于閱讀和導(dǎo)航。在網(wǎng)頁設(shè)計(jì)中，柵格系統(tǒng)確保文本、圖片和其他元素以易于消化的方式呈現(xiàn)，從而提高用戶體驗(yàn)。

2. 團(tuán)隊(duì)層面（Attheteamlevel）

當(dāng)設(shè)計(jì)團(tuán)隊(duì)使用統(tǒng)一的柵格系統(tǒng)時(shí)，團(tuán)隊(duì)成員之間的溝通更加順暢。這種視覺語言讓團(tuán)隊(duì)可以更有效地共同工作，減少誤解和重復(fù)勞動(dòng)。

設(shè)計(jì)師可以利用定義的柵格模板快速布局，這大大提高了工作效率。柵格系統(tǒng)簡化了決策過程，因此設(shè)計(jì)師不必每次都重新考慮元素的位置和尺寸。

為設(shè)計(jì)提供了一個(gè)堅(jiān)實(shí)的基礎(chǔ)，使得未來的擴(kuò)展和修改變得更加容易和一致。設(shè)計(jì)師可以在現(xiàn)有柵格的基礎(chǔ)上添加新的元素或調(diào)整布局，而不會(huì)破壞整體設(shè)計(jì)的和諧性。

雖然柵格提供了規(guī)則，但它也可以激發(fā)設(shè)計(jì)師的創(chuàng)造力。設(shè)計(jì)師可以在這些規(guī)則內(nèi)探索不同的布局和設(shè)計(jì)元素組合，從而創(chuàng)造出獨(dú)特和創(chuàng)新的設(shè)計(jì)方案。

3. 應(yīng)用層面（Applicationlevel）

使用柵格可以更容易地將文本、圖像、視頻和其他媒體類型融合在一個(gè)協(xié)調(diào)的布局中。柵格為不同類型的內(nèi)容提供了自然的“容器”，有助于創(chuàng)建動(dòng)態(tài)和互動(dòng)性較高的用戶界面。

柵格系統(tǒng)使設(shè)計(jì)能夠更容易地適應(yīng)不同的屏幕尺寸和分辨率。在響應(yīng)式設(shè)計(jì)中，柵格可以根據(jù)設(shè)備屏幕的大小自動(dòng)調(diào)整，保持內(nèi)容的可訪問性和美觀性。

四、柵格分類有幾種呢？

在界面和網(wǎng)頁設(shè)計(jì)中，柵格系統(tǒng)是用于創(chuàng)建有序、對(duì)齊和視覺上一致的布局的一個(gè)工具。柵格系統(tǒng)可以被分為三種主要類型：固定柵格、流動(dòng)?xùn)鸥窈突旌蠔鸥瘛Ｃ糠N類型都有其特定的應(yīng)用場(chǎng)景和特性。

1. 固定柵格（FixedGrid）

固定柵格系統(tǒng)由具有固定像素寬度的列組成。這意味著無論用戶的屏幕尺寸或分辨率如何變化，柵格的尺寸和布局保持不變。

固定柵格通常適用于需要確保設(shè)計(jì)在所有設(shè)備上看起來完全一致的環(huán)境，或者在設(shè)計(jì)師知道大多數(shù)用戶將使用相同類型設(shè)備（如特定型號(hào)的顯示器）的情況下。

優(yōu)點(diǎn)：

一致性：在所有屏幕上提供一致的布局和體驗(yàn)，因?yàn)闁鸥癯叽绻潭ú蛔儭?/p>

簡單易用：設(shè)計(jì)和開發(fā)更簡單，因?yàn)闁鸥裣到y(tǒng)不需要調(diào)整以適應(yīng)不同屏幕尺寸。

缺點(diǎn)：

缺乏靈活性：在小屏幕上可能會(huì)導(dǎo)致布局問題，如過度擠壓或需要水平滾動(dòng)。

用戶體驗(yàn)限制：不能提供針對(duì)不同設(shè)備優(yōu)化的布局，可能影響在移動(dòng)設(shè)備上的表現(xiàn)。

2. 流動(dòng)?xùn)鸥瘢‵luidGrid）

流動(dòng)?xùn)鸥裣到y(tǒng)的列寬基于屏幕尺寸的百分比而非固定像素定義。隨著瀏覽器窗口或設(shè)備屏幕的大小調(diào)整，柵格和其中的內(nèi)容也會(huì)相應(yīng)地縮放和調(diào)整。

流動(dòng)?xùn)鸥裉貏e適用于響應(yīng)式設(shè)計(jì)，可以優(yōu)化各種屏幕尺寸的用戶體驗(yàn)，從大型顯示器到智能手機(jī)。

優(yōu)點(diǎn)：

響應(yīng)性強(qiáng)：柵格自動(dòng)調(diào)整以適應(yīng)不同的屏幕寬度，無需額外的設(shè)計(jì)或編碼工作。

用戶體驗(yàn)優(yōu)化：在不同設(shè)備上能夠提供更優(yōu)的閱讀和瀏覽體驗(yàn)。

缺點(diǎn)：

設(shè)計(jì)復(fù)雜性：設(shè)計(jì)師需要考慮如何在不同的屏幕尺寸上保持內(nèi)容的可視性和美觀性。

可能的布局問題：如果不恰當(dāng)?shù)厥褂冒俜直?，可能?dǎo)致某些屏幕尺寸下的布局失衡。

3. 混合柵格（HybridGrid）

混合柵格系統(tǒng)結(jié)合了固定柵格和流動(dòng)?xùn)鸥竦奶攸c(diǎn)。在某些情況下，它使用固定寬度的列；在其他情況下，使用基于百分比的寬度。這種靈活性允許設(shè)計(jì)師根據(jù)內(nèi)容和功能需求優(yōu)化每個(gè)元素的布局。

混合柵格非常適合需要同時(shí)保持一定設(shè)計(jì)一致性和響應(yīng)多種屏幕尺寸需求的復(fù)雜項(xiàng)目。

優(yōu)點(diǎn)：

靈活性和控制性：設(shè)計(jì)師可以根據(jù)需要在固定和流動(dòng)布局之間做選擇，以達(dá)到最佳的設(shè)計(jì)效果。

適應(yīng)性強(qiáng)：能夠更好地適應(yīng)中等尺寸的屏幕，如平板電腦，同時(shí)在大屏和小屏上保持布局的合理性。

缺點(diǎn)：

實(shí)現(xiàn)難度高：需要更多的設(shè)計(jì)和編碼考慮，以確保所有元素在不同情況下都表現(xiàn)良好。

可能的性能問題：混合使用固定和流動(dòng)單位可能導(dǎo)致某些設(shè)備上的性能問題或顯示不一致。

五、構(gòu)成柵格系統(tǒng)基礎(chǔ)要素有哪些呢？

常見的柵格主要有6個(gè)基礎(chǔ)元素組成，分別是網(wǎng)格、列、水槽、邊距、柵格總寬、容器盒子，下面我們?cè)敿?xì)了解這6格基礎(chǔ)元素。

柵格的計(jì)算公式：柵格總寬=列寬*N+水槽*（N-1）+邊距*2

1. 網(wǎng)格（Grid）

網(wǎng)格（Grid）是構(gòu)成頁面柵格系統(tǒng)的最小單位，也經(jīng)常會(huì)被成為最小單元格，是界面中的基礎(chǔ)單位，所有界面元素豆按照這個(gè)基礎(chǔ)單位進(jìn)行分布和布局，由多個(gè)格子有規(guī)律的組成網(wǎng)，形成網(wǎng)格。通常設(shè)計(jì)時(shí)常用的單元格最小單位為8

為什么是8，不可是其他數(shù)字呢，你肯定會(huì)有這樣的疑惑，別急向下看：

a.適應(yīng)性和響應(yīng)性較高

8作為偶數(shù)，能適應(yīng)市面上絕大多數(shù)的設(shè)備屏幕，兼容性較高。在響應(yīng)式設(shè)計(jì)中，網(wǎng)格單位的選擇對(duì)于適應(yīng)不同的屏幕尺寸和布局非常重要。使用8作為網(wǎng)格單位可以更容易地調(diào)整和重新排列元素，確保在不同設(shè)備上的一致性和良好的用戶體驗(yàn)。

在輸出各種倍數(shù)圖片時(shí)也可以保證圖片不會(huì)出現(xiàn)奇數(shù)（1.5，1.75等像素單位的出現(xiàn)），手機(jī)端導(dǎo)出的圖均為偶數(shù)（IOS導(dǎo)出：1倍圖、2倍圖、3倍圖；Android導(dǎo)出：1倍圖、1.5倍圖、2倍圖、3倍圖4倍圖）。

開發(fā)工程師使用的前端開源組件庫比如Metronic、Antdesign等開源組件庫也是基于8的原子單位來設(shè)計(jì)，因此如果設(shè)計(jì)師也使用以8為基本單位的柵格系統(tǒng)，開發(fā)與設(shè)計(jì)師相互對(duì)接就會(huì)更加方便，還原度方面開發(fā)實(shí)現(xiàn)也能更高品質(zhì)地去還原我們的設(shè)計(jì)。

b.靈活性

8作為一個(gè)相對(duì)較小的數(shù)字，可以輕松地進(jìn)行倍數(shù)縮放。如果需要更細(xì)致的網(wǎng)格，可以將8的倍數(shù)相加或減去以創(chuàng)建更小的間距或更復(fù)雜的布局。

8可以被2、4和8整除，這使得布局和元素的對(duì)齊更加方便。它允許將屏幕或頁面分割為相等的部分，簡化了設(shè)計(jì)中的布局過程。

c.一致性

使用相同的網(wǎng)格單位可以保持設(shè)計(jì)的一致性和可預(yù)測(cè)性。元素在網(wǎng)格上對(duì)齊可以讓設(shè)計(jì)看起來更整齊、統(tǒng)一，并且在不同屏幕尺寸或設(shè)備上保持一致性。

溫馨提示：網(wǎng)格單位的選擇可以根據(jù)具體的設(shè)計(jì)需求和項(xiàng)目具體要求而有所不同。有些項(xiàng)目可能會(huì)選擇其他的網(wǎng)格單位，如12或16，以滿足特定的設(shè)計(jì)要求。重要的是在設(shè)計(jì)過程中選擇一個(gè)一致的網(wǎng)格單位，并在整個(gè)設(shè)計(jì)中保持對(duì)齊和一致性。

2. 列（Column）

列（Column）通常指的是柵格數(shù)量，

如12柵格就有12個(gè)列、24柵格就有24個(gè)列等。這些列數(shù)是根據(jù)設(shè)計(jì)的需求和布局的復(fù)雜性來確定的。較少的列數(shù)可以提供更簡單的布局，而較多的列數(shù)則可以提供更靈活和復(fù)雜的布局。

3. 水槽（Gutter）

水槽（Gutter）是指列與列之間的間距。

水槽可以幫助提高布局的可讀性?？梢员苊庠刂g過于擁擠，使內(nèi)容更易于閱讀和理解。水槽還可以在不同列的視覺之間提供足夠的空間，使內(nèi)容更加突出。水槽的寬度可以根據(jù)設(shè)計(jì)的需要進(jìn)行調(diào)整。在一些柵格系統(tǒng)中，水槽的寬度可能是固定的，而在其他系統(tǒng)中，可以根據(jù)個(gè)人的需求進(jìn)行自定義。這使得柵格系統(tǒng)在布局設(shè)計(jì)中更加靈活和可擴(kuò)展。

4. 邊距（Margin）

邊距（Margin）是指列與容器邊界或其他元素之間的空白區(qū)域。

邊距在響應(yīng)式布局中具有重要作用。通過在不同屏幕尺寸下調(diào)整邊距的大小，可以改變?cè)刂g的間距和布局。這使得柵格系統(tǒng)能夠適應(yīng)不同設(shè)備和視口尺寸，提供更好的用戶體驗(yàn)。

邊距也可以用于創(chuàng)建特定的可視效果。通過調(diào)整邊距的大小和位置，可以在布局中實(shí)現(xiàn)不同的空白區(qū)域和空間感。邊距的使用可以改變?cè)刂g的相對(duì)位置和比例，從而影響整體設(shè)計(jì)的外觀和感覺。

5. 柵格總寬（Container）

柵格總寬（Container）=所有列+所有水槽+兩側(cè)邊距，這就是整個(gè)柵格系統(tǒng)的總寬度。

柵格總寬可以根據(jù)設(shè)計(jì)需求進(jìn)行調(diào)整和擴(kuò)展。如果需要更大的布局空間，可以增加?xùn)鸥窨倢挾?，以容納更多的列或更寬的元素。反之，如果需要較小的布局空間，可以減小柵格總寬度，以創(chuàng)建更緊湊的布局。

6. 容器盒子（Col-n）

容器盒子（Col-n）是指包含了柵格布局的最外層元素或容器，容器內(nèi)的元素可以不用必須沿用柵格布局，會(huì)將文字、圖片、視頻、按鈕等元素約束在限定的容器盒子內(nèi)形成可以復(fù)用的設(shè)計(jì)組件。容器盒子的寬度會(huì)根據(jù)設(shè)計(jì)需求的不同來進(jìn)行定義內(nèi)容需要占多少列形成容器盒子。

六、如何建立柵格系統(tǒng)

1. 常見的布局樣式

在設(shè)計(jì)web端界面時(shí)，我們需要拆分業(yè)務(wù)選擇對(duì)應(yīng)適合的布局樣式分別是：頂部導(dǎo)航布局、左側(cè)導(dǎo)航布局、T型導(dǎo)航布局。

a.頂部導(dǎo)航布局

頂部導(dǎo)航布局通常使用比較多的是企業(yè)類官網(wǎng)。

優(yōu)點(diǎn)：

導(dǎo)航易于訪問：將導(dǎo)航放置在頁面頂部可以使用戶更容易找到并訪問導(dǎo)航菜單，提供直觀的導(dǎo)航體驗(yàn)。

垂直空間利用高：上下布局占據(jù)較少的垂直空間，使得頁面內(nèi)容能夠更多地展示在用戶視野范圍內(nèi)。

適應(yīng)性強(qiáng)：頂部導(dǎo)航上下布局在不同屏幕尺寸和設(shè)備上適應(yīng)性較好，特別適合移動(dòng)設(shè)備瀏覽。

缺點(diǎn)：

導(dǎo)航限制：由于導(dǎo)航位于頁面頂部，導(dǎo)航菜單的可見區(qū)域有限，可能對(duì)具有大量導(dǎo)航選項(xiàng)的網(wǎng)站造成限制。

內(nèi)容展示受限：頂部導(dǎo)航上下布局可能會(huì)限制頁面中主要內(nèi)容的展示空間，特別是在較小的屏幕上。

b.左側(cè)導(dǎo)航布局

左側(cè)導(dǎo)航布局通常使用比較多的是后臺(tái)管理系統(tǒng)。

優(yōu)點(diǎn)：

導(dǎo)航信息集中：將導(dǎo)航放置在頁面左側(cè)可以使導(dǎo)航菜單集中展示，提供清晰的導(dǎo)航結(jié)構(gòu)和導(dǎo)航路徑。

多層級(jí)導(dǎo)航：左側(cè)導(dǎo)航左右布局適合多層級(jí)導(dǎo)航結(jié)構(gòu)，可以有效組織和展示多個(gè)導(dǎo)航層級(jí)。

適應(yīng)性較強(qiáng)：左側(cè)導(dǎo)航左右布局對(duì)于寬屏幕顯示器和橫向滾動(dòng)的設(shè)備有良好的適應(yīng)性。

缺點(diǎn)：

水平空間利用低：左側(cè)導(dǎo)航左右布局占據(jù)較多的水平空間，可能會(huì)限制頁面內(nèi)容的展示范圍。

對(duì)小屏幕不友好：在較小的屏幕上，左側(cè)導(dǎo)航左右布局可能會(huì)導(dǎo)致內(nèi)容被壓縮或需要水平滾動(dòng)，影響用戶體驗(yàn)。

c.T型導(dǎo)航布局

T型導(dǎo)航布局一些復(fù)雜類型的企業(yè)網(wǎng)站或復(fù)雜的SaaS系統(tǒng)會(huì)使用。

優(yōu)點(diǎn)：

強(qiáng)調(diào)主要內(nèi)容：T型導(dǎo)航布局將主要內(nèi)容放置在頂部，使其在頁面中更加突出和易于訪問。

導(dǎo)航與內(nèi)容結(jié)合：T型導(dǎo)航布局將次要的或次級(jí)的導(dǎo)航放置在主要內(nèi)容的側(cè)邊或底部，使用戶可以根據(jù)自己的需求選擇性地查看詳細(xì)信息。

提供導(dǎo)航和輔助功能：T型導(dǎo)航布局通常在頂部提供導(dǎo)航菜單、搜索欄等輔助功能，方便用戶進(jìn)行導(dǎo)航和操作。

缺點(diǎn)：

空間利用相對(duì)較低：T型導(dǎo)航布局在頁面上占用較多的垂直和水平空間，因此對(duì)于較小的屏幕可能無法展示全部內(nèi)容。

響應(yīng)式設(shè)計(jì)挑戰(zhàn)：T型導(dǎo)航布局需要在不同屏幕尺寸和設(shè)備上進(jìn)行響應(yīng)式設(shè)計(jì)，以保持合適的布局和舒適的用戶體驗(yàn)。

需要根據(jù)具體的設(shè)計(jì)需求、目標(biāo)用戶和設(shè)備上下文來選擇適合的布局方式。在實(shí)際設(shè)計(jì)中，可以結(jié)合上述布局方式的優(yōu)點(diǎn)，并充分考慮響應(yīng)式設(shè)計(jì)的要求，以提供良好的用戶體驗(yàn)。

2. 選擇柵格的列數(shù)

我們?cè)谧鰱鸥裣到y(tǒng)的時(shí)候可以使用http://grid.guide/在這個(gè)網(wǎng)站你可以根據(jù)不同寬度的網(wǎng)頁來制定你要的列寬和間距，這就是柵格系統(tǒng)，一個(gè)網(wǎng)頁版的田字格，可以根據(jù)不同的網(wǎng)頁風(fēng)格調(diào)整內(nèi)容寬度，產(chǎn)生不同間距和不同列寬。常見的柵格有12柵格、24柵格、當(dāng)然也有其他特殊的類型比如移動(dòng)端的6柵格、5柵格和特殊的4柵格等（柵格只是作為參考要根據(jù)項(xiàng)目需求靈活調(diào)整）。

12柵格和24柵格使用比較多，為什么是12柵格和24柵格不是10柵格，14柵格呢？

因?yàn)?2柵格和24柵格可以被2、3、4、5、6等這些數(shù)字等分，可以最大程度的滿足各種等分布局的需要。

3. 定義水槽（Gutter）和邊距（Margin）

水槽（Gutter）是列與列之間的間距，定義的方式可以以8px為最小單位進(jìn)行推倒，如8px、16px、24px、32px、40px…等，這樣定義的好處可以保持視覺上的一致性，根據(jù)產(chǎn)品的調(diào)性以及設(shè)計(jì)風(fēng)格來決定水槽的數(shù)值（沒有絕對(duì)值）。

4. 定義8pt間距系統(tǒng)

在查看了很多頁面中的代碼布局，大部分都是保持8的倍數(shù)，統(tǒng)一設(shè)計(jì)到開發(fā)的布局語言，減少還原度損耗，經(jīng)過驗(yàn)證，可以在一定程度上，幫助我們更快更好地實(shí)現(xiàn)布局空間上的設(shè)計(jì)決策。

通常我們定義間最小單元格數(shù)值時(shí)需要考慮兩個(gè)方面：

a.第一點(diǎn)考慮硬件問題，在當(dāng)前市面上的屏幕有很多類型尺寸，屏幕寬度可以整除的數(shù)值

b.第二個(gè)點(diǎn)需要考慮數(shù)值的靈活性，不方便設(shè)計(jì)時(shí)使用的數(shù)值不被選擇

數(shù)值4、6、8、10這四個(gè)值基本都可以滿足，靈活性方面4px效果上最佳，但是頁面會(huì)被分割的非常細(xì)碎，設(shè)計(jì)時(shí)不太好把控，看起來也不是很大氣。因此我們需要根據(jù)實(shí)際情況和場(chǎng)景選擇合適的數(shù)值，4px或者6px適合使用在業(yè)務(wù)比較復(fù)雜的產(chǎn)品中頁面排版或移動(dòng)端中使用；8px單元格可以滿足大多數(shù)項(xiàng)目中的場(chǎng)景，因此比較推薦使用8px。

5. 屏幕尺寸選擇

根據(jù)百度統(tǒng)計(jì)的數(shù)據(jù)顯示，2019年10月份我國網(wǎng)民訪問PC網(wǎng)頁的主流設(shè)備分辨率仍然為1920*1080，占總百分百為42.94%。很顯然，絕大部分的屏幕分辨率都已經(jīng)超過了1366*768，在適配網(wǎng)頁時(shí)則不需要對(duì)1366寬度以下的尺寸做特殊處理?？梢?，1920px在目前是PC端網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn)。