關(guān)于界面柵格的攻略,，延展到適配方式,。

前言

本文主要介紹等距柵格，旨在為有需要的同學(xué)解析柵格,，從概念,、結(jié)構(gòu)和設(shè)計(jì)上更有效、自信地解決柵格問(wèn)題,，其實(shí)主要還是自己對(duì)柵格體系的查缺補(bǔ)漏,。大家可以對(duì)照目錄跳著閱讀。

事實(shí)上,，絕大多數(shù)的設(shè)計(jì)師都知道柵格很重要,，簡(jiǎn)單點(diǎn)就是等分運(yùn)用在內(nèi)容層。當(dāng)我們仔細(xì)研究柵格相關(guān)原理時(shí),，只要不嫌麻煩,，就會(huì)發(fā)現(xiàn)在柵格系統(tǒng)下能更快解決設(shè)計(jì)問(wèn)題,，并讓設(shè)計(jì)更具功能性、邏輯性和視覺美感,。

柵格是什么

1. 柵格與網(wǎng)格

柵格與網(wǎng)格的本質(zhì)其實(shí)是相同的，實(shí)現(xiàn)有組織的設(shè)計(jì)最簡(jiǎn)單方法之一就是應(yīng)用網(wǎng)格系統(tǒng),，約束性地為你提供了一個(gè)非?；镜脑O(shè)計(jì)框架，這是一種久經(jīng)考驗(yàn)的技術(shù),，最初運(yùn)用在印刷版式中,。網(wǎng)格與柵格英文都以“Grid”來(lái)表示。但一般我們更愿意在平面設(shè)計(jì)中更多的稱為 “網(wǎng)格”,，會(huì)存在上下或傾斜,，在網(wǎng)頁(yè)端或移動(dòng)端中更多的稱為為“柵格”。

常見網(wǎng)格系統(tǒng)有三種：直接分割,，等距分割,，數(shù)學(xué)分割。本文主要介紹等距柵格,，網(wǎng)頁(yè)中的網(wǎng)格是指使用垂直和水平(較少)等距輔助線對(duì)布局進(jìn)行的劃分,，它形成了用戶界面的基本結(jié)構(gòu)或框架。

平面設(shè)計(jì)一般用到的是固定的紙張規(guī)格，寬度和高度都是固定的,，網(wǎng)格會(huì)存在上下或傾斜的視圖,；在界面中柵格寬度跟隨不同設(shè)備，高度由內(nèi)容多少來(lái)決定,，是上下視圖,。

界面柵格系統(tǒng)是從平面網(wǎng)格系統(tǒng)中發(fā)展而來(lái),，以依據(jù)一定的規(guī)律,、合理設(shè)置基準(zhǔn)線來(lái)指導(dǎo)和規(guī)范界面中的如文本、圖像,、按鈕和其他元素,，保證頁(yè)面的每個(gè)區(qū)域能夠穩(wěn)健地排布起來(lái)。柵格系統(tǒng)的使用,，讓界面信息呈現(xiàn)更美觀易讀,、更具可用性，對(duì)于前端來(lái)說(shuō),，網(wǎng)頁(yè)也將更加靈活與規(guī)范,。

2. 柵格的設(shè)計(jì)哲學(xué)

將柵格視為一種秩序系統(tǒng)來(lái)進(jìn)行使用,，是設(shè)計(jì)師某種特定的精神和態(tài)度的表達(dá)，它體現(xiàn)了設(shè)計(jì)師是以一種結(jié)構(gòu)性,、預(yù)見性的方式來(lái)進(jìn)行構(gòu)思和設(shè)計(jì),。同時(shí)，這也是一種職業(yè)信仰的體現(xiàn),，設(shè)計(jì)作品應(yīng)該是易懂的,、客觀的、功能性的和具有數(shù)學(xué)邏輯美感的,。

用結(jié)構(gòu)化,、系統(tǒng)化的柵格手段進(jìn)行設(shè)計(jì)，對(duì)設(shè)計(jì)是具有極為重要的意義的,。使用柵格系統(tǒng)就意味著設(shè)計(jì)遵循普遍與合理,。系統(tǒng)化和清晰化、集中精力看透關(guān)鍵問(wèn)題,、用客觀取代主觀,、理性地去看待設(shè)計(jì)過(guò)程。

3. 柵格的價(jià)值

產(chǎn)品設(shè)計(jì)中,，參與設(shè)計(jì)的人員越多,，用戶設(shè)備越多，屏幕越多,，設(shè)計(jì)師就越需創(chuàng)建一套柵格系統(tǒng)來(lái)組織內(nèi)容,，使設(shè)計(jì)內(nèi)容與細(xì)節(jié)能適應(yīng)更多場(chǎng)景。合理的柵格系統(tǒng)可以通過(guò)調(diào)整布局滿足產(chǎn)品各設(shè)備尺寸的需求,。

有序可依,，提升協(xié)同效率

對(duì)于設(shè)計(jì)師與團(tuán)隊(duì)：柵格系統(tǒng)定義了一套底層的,、統(tǒng)一的測(cè)量單位,，當(dāng)設(shè)計(jì)團(tuán)隊(duì)內(nèi)對(duì)此達(dá)成共識(shí)時(shí)，可以避免因屏幕適配,、比例換算產(chǎn)生的像素偏移,，適配多種屏幕，提升精致細(xì)膩程度,，同時(shí)保證了設(shè)計(jì)稿件中元素屬性的一致性和規(guī)范化,，并有效降低設(shè)計(jì)師的決策成本，提高不同設(shè)計(jì)師之間的協(xié)同效率,。同時(shí)避免了設(shè)計(jì)師與前端工程師在細(xì)節(jié)上的反復(fù)溝通確認(rèn),，提升了整個(gè)開發(fā)效率。

布局規(guī)律,，減少認(rèn)知成本

對(duì)于用戶：運(yùn)用網(wǎng)格系統(tǒng)能夠讓設(shè)計(jì)更有秩序和節(jié)奏感,，規(guī)避了不同設(shè)計(jì)師理解不同造成產(chǎn)出差異的問(wèn)題,，如頁(yè)面節(jié)奏，空白等,。在保持與原先展示內(nèi)容基本一致的情況下,，頁(yè)面信息結(jié)構(gòu)更加清晰，提高閱讀效率,，減少認(rèn)知成本,，提供一致性體驗(yàn)。

4. 柵格的的組成

柵格使用列在水平方向上拆分頁(yè)面,，以有組織的方式對(duì)元素進(jìn)行布局,，并模塊化設(shè)計(jì)多個(gè)頁(yè)面和組件。同時(shí)柵格還定義了一組固定的測(cè)量單位,，指示每個(gè)設(shè)計(jì)元素遵守的尺寸,，間距和對(duì)齊方式。

最小單元

網(wǎng)格的基本構(gòu)成就是單元格,，由格子組成網(wǎng),。間距都可以用最小單元來(lái)增加或者減小，最小單元格是所有設(shè)計(jì)元素（從排版到列,，框,，圖標(biāo)和插圖）的幾何基礎(chǔ)，它為所有創(chuàng)造性的決策提供了結(jié)構(gòu)和指導(dǎo),。所以柵格系統(tǒng)的重要一步就是需要先定義好柵格的原子單元大小,，我們以最小單元去定義網(wǎng)格系統(tǒng)。

最小單位推薦 8px

目前 web 端最普適易用最小單位的是 8px,，我們利用 8px 建立網(wǎng)格,，8 的倍數(shù)組成了列、行,、框的尺寸以及它們的邊距和填充,，使用 8 的倍數(shù)來(lái)定義模塊的間距與元素的尺寸。

當(dāng)我們熟悉最小的柵格單位 8px 以后，能有力的減少?zèng)Q策時(shí)間,。整個(gè)設(shè)計(jì)的元素大小,，尤其是間距可以快捷的在腦海中反應(yīng)出來(lái)，8,、16,、24、32,、40,、48,、56、64,、72,、80、88,、96,、192 等，這里都是 8 的倍數(shù)或能被 8 整除,。讓設(shè)計(jì)師帶著工程實(shí)現(xiàn)的思維去考慮頁(yè)面布局,，設(shè)計(jì)側(cè)和工程側(cè)對(duì)頁(yè)面一致性的解讀，能夠有效降低設(shè)計(jì)到實(shí)現(xiàn)的轉(zhuǎn)化成本,，提高開發(fā)效率,。也要注意間距不能無(wú)腦套 8 的倍數(shù)，優(yōu)先用 8,，當(dāng)跨度太大也可以使用 4 和 12,。

那為什么不選擇 4,，6 或 10？

注意的是最小單位應(yīng)由實(shí)際工作來(lái)決定,，沒有絕對(duì)的最小單位數(shù)值,。在適用性方面，4,、6,、8、10 這四個(gè)數(shù)值都基本可以滿足,。

當(dāng)使用 4px 時(shí),，頁(yè)面就會(huì)被分割的非常細(xì)碎，當(dāng) 8 不夠用的時(shí)候,，就要使用 4 了,。

最小單元格的數(shù)值選擇需要從兩方面考慮：

• 最小單位在具體使用時(shí)是否具有一定的靈活性
• 最小單位能否被大多數(shù)屏幕的寬度整除,，即廣泛的適用性

屏幕尺寸和分辨率種類有增無(wú)減,。使得設(shè)計(jì)師對(duì) “維護(hù)適配性” 的難度越來(lái)越大，設(shè)計(jì)稿導(dǎo)出會(huì)有@0.5,、@0.75,、@1、@1.5,、@2,、@3 倍多種需求,，在 1@倍設(shè)計(jì)稿，奇數(shù)（比如 5px）就會(huì)出現(xiàn)半像素偏移,。而 6 除以 2 得 3,，3 就是奇數(shù)了，10 除以 2 的 5,，6 和 10 不能被 2 除盡,。

使用偶數(shù) 8px 可以輕松一致地縮放各種倍數(shù)而不失真,，大多數(shù)流行的屏幕尺寸都可以被 8 整除,，足夠普適，以 8px 為增量進(jìn)行縮放可提供大量選項(xiàng),，所以推薦 8px,。

列 + 列間距 + 大邊距

柵格系統(tǒng)由 3 個(gè)部分組成：列,、列間距,、左右大邊距。柵格系統(tǒng)是由列和列間距交替分布形成的,，列是柵格的數(shù)量單位,，虛擬的垂直塊，用于對(duì)齊內(nèi)容,，我們以百分比或固定值定義列寬,。豎直方向根據(jù)頁(yè)面內(nèi)容是可以無(wú)限延伸，所以柵格系統(tǒng)在豎直方向的柵格可以不體現(xiàn)出來(lái),，設(shè)計(jì)時(shí)只要在水平方向保持規(guī)律變化就可以了,。

通常設(shè)定柵格數(shù)量說(shuō)的就是列的數(shù)量，如 12 柵格就有 12 列,、24 柵格就有 24 個(gè)列,。列間距把控頁(yè)面留白，數(shù)值越大,，頁(yè)面留白越多,，視覺效果越松散；反之,，頁(yè)面越緊湊,，畫片分割的越碎。

大邊距就是設(shè)計(jì)內(nèi)容區(qū)以外的空間,。我們?cè)谠O(shè)計(jì)中一般將大邊距寬度定義為固定值，該值決定每個(gè)設(shè)計(jì)的最小呼吸空間，靈活的邊距占據(jù)了由列,，列間距組成的網(wǎng)格后的剩余空間,。左右大邊距是計(jì)算在柵格的總寬之內(nèi)的，刪格系統(tǒng)的寬度就是列,、列邊距,、大邊距之和。

也有彈性大邊距,，會(huì)根據(jù)不同的屏幕尺寸而變化,，就是頁(yè)面邊距可以隨著屏幕尺寸的變化而變化。頁(yè)面邊距在移動(dòng)設(shè)備上通常是 12px 到 40px 之間,，在平板設(shè)備和桌面設(shè)備頁(yè)面邊距變化就相對(duì)多了,。

容器

我們按照頁(yè)面結(jié)構(gòu)從組件 – 容器 – 區(qū)塊 – 頁(yè)面 – 場(chǎng)景進(jìn)行依次拼裝成最終形成產(chǎn)品設(shè)計(jì)方案。容器集合了下級(jí)組件,，也可以是多個(gè)復(fù)雜元素的集合,，文字、圖片,、按鈕,。如登錄區(qū)塊是由多個(gè)標(biāo)簽、輸入框,、按鈕組成,。容器是成組的設(shè)計(jì)元素，形成了獨(dú)立的內(nèi)容或功能盒子,。區(qū)塊嵌套容器,，由區(qū)塊組成了頁(yè)面內(nèi)容。

柵格規(guī)范的是容器間比例,，而非具體寬度,。容器大小收到柵格系統(tǒng)的限制，柵格系統(tǒng)可以根據(jù)需求被 2 等分,、3 等分,、4 等分、6 等分,、12 等分,，具體采用哪種比例的組合需要根據(jù)需求來(lái)定。柵格系統(tǒng) / 設(shè)備分辨率大小在變換的同時(shí)會(huì)帶動(dòng)區(qū)塊大小的變化,，從而使容器發(fā)生變化,，如元素尺寸變化，文字換行等,。

如下圖,，共有 32 個(gè)容器。對(duì)于緊密相關(guān)的內(nèi)容,，請(qǐng)考慮組成區(qū)塊,。頁(yè)面被分割的越碎時(shí)，設(shè)計(jì)中越難把控,。

5. 拓展知識(shí)

960 柵格系統(tǒng)

這是一個(gè)比較單純的框架。從 1990 年代后期開始就基于表格的布局開始使用的柵格系統(tǒng) 960 Grid System,。與早期計(jì)算機(jī)相比,，雖然今天的屏幕分辨率達(dá)到了很高的尺寸，但使用 960 像素的寬度依舊可以確保在許多屏幕上能夠正確顯示,。

960 Grid System,，是由 Nathan Smith 開發(fā)的 CSS 框架，因?yàn)樵缙诘碾娔X熒幕寬度約為 1024,，扣除瀏覽器的卷軸及邊框,，為 960px，960 Grid System 有 12 欄位,、16 欄位版本,，960 正是意味著，12 能被 3,、4,、6 整除，能建立 3 欄,、4 欄,、6 欄的版面配置，網(wǎng)頁(yè)的使用也比較靈活,。網(wǎng)頁(yè)版面可以輕松配置,，合并，也不會(huì)有畸零數(shù),，非常適合排版,。

960 Grid System 是使用固定寬度 960px，置中對(duì)齊畫面的方式呈現(xiàn)在網(wǎng)頁(yè)上,，去除左右兩邊各 10px 的邊距空間,，留下中間 940 px 的設(shè)計(jì)內(nèi)容區(qū)，以 20px 作為槽,。

而超出 960 的部分的設(shè)計(jì)元素,，就使用定寬設(shè)計(jì)。

Bootstrap 網(wǎng)頁(yè)框架

今天市面上看見的響應(yīng)式網(wǎng)站,，多數(shù)使用了一些開源的代碼或者框架,。而應(yīng)用最廣泛的，就數(shù) Bootstrap 了。

Bootstrap 是 Twitter 推出的一套強(qiáng)大網(wǎng)頁(yè)框架,，是全球最受歡迎的前端開源工具庫(kù),，它支持 Sass 變量和 mixin、響應(yīng)式柵格系統(tǒng),、自帶大量組件和眾多強(qiáng)大的 JavaScript 插件,，也提供了快速建立響應(yīng)式網(wǎng)頁(yè)的功能。已經(jīng)更新到 V5.0.1 版本了 Bootstrap 中的柵格系統(tǒng)是一套響應(yīng)式,、移動(dòng)設(shè)備優(yōu)先的瀑布流式柵格系統(tǒng),。市面上很多前端框架會(huì)對(duì) Bootstrap 進(jìn)行補(bǔ)充或基于 Bootstrap 開發(fā)。

Bootstrap 提供的柵格系統(tǒng),，也是一樣將內(nèi)容區(qū)分 12 等分,。

它將系統(tǒng)分為 12 列,，當(dāng)然也可以通過(guò)變量來(lái)改變列數(shù)和列寬,，水槽寬度，屏幕浮動(dòng)寬度,；其實(shí)設(shè)置屏幕浮動(dòng)寬度就是我們看到的屏幕自適應(yīng),，就是根據(jù)屏幕寬度來(lái)選擇顯示參數(shù)。Bootstrap 中的柵格流只能作為大的布局定義,，那么針對(duì)最小單位是該用 8,、10、15 還是多少也是需要根據(jù)需求去做分析,。

12 列結(jié)構(gòu)可以進(jìn)一步分解 4 等分,，3 等分大小的模塊。

• Bootstrap 英文網(wǎng) https:///
• Bootstrap 中文網(wǎng) https://www./

如何搭建柵格

1. 確定屏幕寬度

柵格設(shè)計(jì)的第一步就是創(chuàng)建畫布,，對(duì)于不同設(shè)計(jì)的項(xiàng)目,，寬度設(shè)定是不同的。需要注意第一屏重點(diǎn)內(nèi)容全部顯示,，瀏覽器和 Windows 底欄都會(huì)占用屏幕的高度空間,，第一屏縮減默認(rèn)高度 -100px (可調(diào)整)。

屏幕寬度

設(shè)計(jì)師有存在從最大的屏幕 1920 著手設(shè)計(jì)界面的習(xí)慣,，最后考慮最小的屏幕上的顯示效果,。這意味著絕大多數(shù)的設(shè)計(jì)都是從大尺寸開始設(shè)計(jì)的，通常大尺寸的內(nèi)容和功能更全面,。從小往大適配容易,，但是從大往小適配問(wèn)題就特別多。以 1920px 寬設(shè)計(jì)的界面在面向小尺寸屏幕的時(shí)候多數(shù)都很不友好,，甚至到了部分頁(yè)面無(wú)法正常預(yù)覽和使用的地步,。所以優(yōu)先設(shè)計(jì)最小適配屏幕,，然后給出適配方案進(jìn)行調(diào)試。

C 端設(shè)計(jì)的屏幕寬度是找全網(wǎng)平均數(shù)值,，而 B 端的目標(biāo)受眾更細(xì)分、更具體,。類似政府,、學(xué)校,、企業(yè)等等,，計(jì)算機(jī)都是統(tǒng)一購(gòu)買的，這種情況并不需要你去統(tǒng)計(jì)全網(wǎng)和其它渠道數(shù)據(jù),，只要了解具體受眾使用什么分辨率即可,，以它作為主要輸出的畫布寬度。如果 B 端設(shè)計(jì)受眾屏幕寬度實(shí)在不清楚,，可以參考螞蟻中臺(tái)設(shè)計(jì)團(tuán)隊(duì)統(tǒng)一的畫板尺寸為 1440,。

是否定寬(版心)

如果是定寬的設(shè)計(jì)，便不需要考慮自適應(yīng)與響應(yīng)式適配屏幕寬度,。版心是源用平面上的說(shuō)法,。根據(jù)實(shí)際情況，定寬設(shè)計(jì)如果以 1024 的屏幕為內(nèi)容主體,，1366,、1440、1536,、1600,、1920 的屏幕適配 1024 的內(nèi)容主體，多余的空間為左右大邊距,，這種方式設(shè)計(jì)上容易輸出,，適配方式更加高效，隨之就是可用性較低,，對(duì)于使用高分辨的用戶來(lái)說(shuō),，布局會(huì)留下很大的空白。如知乎：

還記得第一次做網(wǎng)頁(yè)練習(xí)的時(shí)候我使用的定寬為 1000px,。

2. 確定柵格區(qū)域

屏幕終端的寬度不等于我們要柵格的寬度。我們?cè)诖_定柵格區(qū)域設(shè)計(jì)前,，先來(lái)熟悉一下 web 產(chǎn)品界面的基礎(chǔ)模塊和分層邏輯,，以常見的 B 端布局為例。

根據(jù)模塊自身屬性及功能定義,，常見的模塊有九類,，分別為頂部導(dǎo)航模塊,、左側(cè)導(dǎo)航模塊、頁(yè)眉模塊,、頁(yè)腳模塊,、主內(nèi)容模塊、左內(nèi)容模塊,、右內(nèi)容模塊,、抽屜模塊、彈窗模塊,。

全局控制層為常置的功能底層，是提供穩(wěn)定性和可預(yù)測(cè)性,、必不可少的層級(jí),，具體有頂部導(dǎo)航模塊、左側(cè)導(dǎo)航模塊等,；內(nèi)容層可分為常置展示層,，具體有主內(nèi)容模塊、左右內(nèi)容模塊或上下模塊等,；臨時(shí)層為動(dòng)態(tài)出現(xiàn)的功能頂層,，始終疊加在基礎(chǔ)層及內(nèi)容層上方，是鏈接上下體驗(yàn)流程的模塊,，具體有抽屜模塊,、彈窗浮層模塊。

梳理了相關(guān)模塊所組合的柵格布局,。Web 端有三種基礎(chǔ)布局和多種擴(kuò)展布局。一般來(lái)說(shuō),，柵格區(qū)域就是指內(nèi)容層,。前面我們提到了定寬(版心)，版心和內(nèi)容層還是有差別的,，版心+兩端頁(yè)邊距=內(nèi)容區(qū),。

那其他模塊能用柵格嗎,？當(dāng)然可以,，有需要就用，不過(guò)需要注意使用效率,。

3. 確定列數(shù),、列間距、大邊距

首先,，創(chuàng)建一個(gè)低保真或高保真的原型,，設(shè)計(jì)一些基本元素和交互流程之后,，考慮最優(yōu)的列數(shù)。列間距的區(qū)域不可以放置內(nèi)容,，我們一般會(huì)給列間距設(shè)定一個(gè)定值來(lái)確定列寬大小,，這個(gè)列間距也是模塊間的間距。

柵格數(shù)量

常見的柵格系統(tǒng)通常被劃分為 12 柵格或 24 柵格,。劃分的格子越多,，承載的內(nèi)容越精細(xì)。也有較少項(xiàng)目會(huì)根據(jù)實(shí)際情況也會(huì)劃分成 16 柵格,、20 柵格,，移動(dòng)設(shè)備屏幕尺寸小于 PC 屏幕，想要有更靈活發(fā)揮空間,，就必須采用列寬較小的柵格,。

12 柵格

12 柵格系統(tǒng)在流行的前端開發(fā)開源工具庫(kù) Bootstrap 與 Foundation 中廣泛使用,，一些商業(yè)網(wǎng)站,、門戶網(wǎng)站通常劃分成 12 柵格，適用于業(yè)務(wù)信息分組較少,，單個(gè)容器內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì),。根據(jù)業(yè)務(wù)場(chǎng)景可以很容易的將 12 柵格區(qū)域劃分成 2 等分、3 等分,、4 等分,、6 等分，以及根據(jù)等分容器組合的多種不等分場(chǎng)景,，組合也是柵格作為一個(gè)界面輔助系統(tǒng)非常方便的原因,。

24 柵格

24 柵格系統(tǒng)適用于業(yè)務(wù)信息量大,、信息分組較多,、單個(gè)容器內(nèi)信息體積較小，場(chǎng)景復(fù)雜的頁(yè)面設(shè)計(jì),。相對(duì) 12 柵格系統(tǒng),，24 柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景,。我們常見的 B 端 web 設(shè)計(jì)一般選用 24 柵格,，柵格系統(tǒng)大小就是 24 列+23 列間距+2 大邊距。

Ant 采用了 24 列,、23 列間隔的柵格系統(tǒng),。其中間隔數(shù)值是固定的，內(nèi)容區(qū)域減去 23 列間隔后,，剩下的部分等分成 24 列,。

注意：

其內(nèi)容模塊必須位于若干列上，可以任意分割,，比如 6×2,，3×4，4×3,，下面是不同分割方式設(shè)計(jì)的信息模塊,。

只要父級(jí)模塊對(duì)齊柵格，子級(jí)元素可以不對(duì)齊列,，同時(shí)子模塊也可以有自己的柵格系統(tǒng),。

列寬無(wú)法永遠(yuǎn)精準(zhǔn)整除,，而相差的像素值往往是無(wú)法被用戶以肉眼察覺的,，柵格不是為了每一像素的精確，而是為了保證瀏覽效果的秩序,、協(xié)調(diào)與統(tǒng)一,。

確定列間距與大邊距

列間距與大邊距選擇 8(最小單位)的倍數(shù)，網(wǎng)格將更加一致,?？梢詫㈤g距值把常用的數(shù)值整理成號(hào)碼表，間距復(fù)用化：小= 8px,，中= 16px,，大= 24px，x 大= 32px 等等…這樣一來(lái),，保持一致性更加容易,，更加合乎邏輯，并且開發(fā)人員也會(huì)高興,，因?yàn)樗麄兛梢愿鶕?jù)屏幕元素之間的關(guān)系安全地假定間距,。

注意：

列間距的數(shù)值越大，頁(yè)面留白間隙越多

列間距的區(qū)域不可以放置內(nèi)容模塊,，內(nèi)容區(qū)從列間距開始到列間距結(jié)束

非常規(guī)設(shè)計(jì)時(shí)不需要柵格系統(tǒng)，根據(jù)設(shè)計(jì)場(chǎng)景可自定義,。

柵格與適配

柵格系統(tǒng)適配過(guò)程中需要考慮三個(gè)原則:等比縮放,、彈性控件、文字流自適應(yīng),。隨著設(shè)備多樣化,，通用的適配方式是自適應(yīng)與響應(yīng)式布局，隨之就是柵格系統(tǒng)的變化,。我們先聊下斷點(diǎn),。

斷點(diǎn),，用瀏覽器打開一個(gè)網(wǎng)站，檢查元素,，右上角會(huì)顯示視窗當(dāng)前的分辨率,，慢慢縮小視窗的寬度，找到頁(yè)面布局的變化點(diǎn),，就是我們上面說(shuō)到的斷點(diǎn)或者次斷點(diǎn),。

斷點(diǎn)設(shè)計(jì)主要考慮基礎(chǔ)的 3 端，一般大于等于 1440 為 web 布局,，1439-500 為平板布局,，小于 500 為手機(jī)布局。每經(jīng)過(guò)一個(gè)斷點(diǎn),，可以改變柵格大?。ū热?16 柵格改為 8 柵格），固定改為拉伸,，樣式（文字,、顏色）。制作精良的話可以設(shè)計(jì)多個(gè)斷點(diǎn),，如 480,、600、840,、960、1280,、1440 和 1600px,。

1. 柵格的行為

固定柵格

固定網(wǎng)格的最大特征是在網(wǎng)頁(yè)收縮過(guò)程中，經(jīng)過(guò)一個(gè)斷點(diǎn)就會(huì)自動(dòng)減少最邊緣元素,，其他元素基本保持不變,。通過(guò)在嵌入式塊中排列圖塊，在工具欄中放置圖標(biāo)等,，可以用固定的框來(lái)形成網(wǎng)格,。柵格列數(shù)隨著瀏覽器寬度的減少而減少，邊緣圖塊自動(dòng)換行,，或者有時(shí)會(huì)溢出滾動(dòng)條,。

首先通過(guò)最小單位選擇一個(gè)基本尺寸，然后以基本尺寸的倍數(shù)構(gòu)建每個(gè)盒子框,，就會(huì)出現(xiàn)一個(gè)個(gè)網(wǎng)格,。

流動(dòng)?xùn)鸥?/strong>