編輯導(dǎo)語：在響應(yīng)式柵格系統(tǒng)中，斷點是控制頁面進行布局變化的一系列數(shù)值，對頁面有著一定的影響。很多同學(xué)對斷點不理解，作者總結(jié)了關(guān)于斷點的應(yīng)用，分享給你。

我曾經(jīng)在之前的文章中為大家介紹過有關(guān)「響應(yīng)式柵格設(shè)計」的相關(guān)設(shè)計經(jīng)驗。最近我也把一些同學(xué)對于「斷點」概念的提問整理和分享給你，希望對你有幫助——

一、斷點的數(shù)量是否越多越好？

不一定。斷點數(shù)量越多，產(chǎn)品在不同尺寸的頁面中切換過程會越順暢，但是設(shè)計和開發(fā)的成本也會相應(yīng)的增加。

斷點（Breakpoints）其實是控制頁面進行布局變化的一系列數(shù)值。再簡單點說，就是當頁面到達某一個斷點值時，頁面的排版就會發(fā)生變化。

關(guān)于斷點，你需要建立以下認知概念：

1. 通常情況下，一款產(chǎn)品的斷點數(shù)量

在4-6 個為宜，因為如果基于每一個斷點都給出一套頁面排版方案，那么斷點的數(shù)量越多，產(chǎn)品頁面被拉伸時的變化就會越順暢，同時產(chǎn)品的設(shè)計和開發(fā)成本也會越高。

2. 斷點值，沒有絕對的數(shù)值規(guī)范

你可以根據(jù)你產(chǎn)品的頁面布局和尺寸來確定，也可以按照你的用戶常用的設(shè)備來設(shè)定。你也可以認為：當你的頁面的寬度被擠壓變窄，使得排版布局不得不發(fā)生變化時，就可以給出一個頁面的斷點值。

舉個例子，下圖是某產(chǎn)品斷點值和頁面效果案例，其中的 756px、974px 并不是常見數(shù)值，但只要它們符合產(chǎn)品的設(shè)計和功能需要，就可以將其定為斷點值。只不過數(shù)值不是整數(shù)，不太好記：

3. 每個斷點下對應(yīng)的柵格方案，沒有絕對的標準解法

你可以根據(jù)自己的產(chǎn)品設(shè)計需要，靈活地規(guī)定不同斷點值下的柵格列數(shù)（Column）、邊距（Margin）和間距（Gutter）的值，以及這些值之間的變化規(guī)律。

其實柵格和斷點本身是設(shè)計方法，是用來幫助產(chǎn)品做好適配的。所以柵格方案要去匹配你的產(chǎn)品頁面設(shè)計，才能更好地服務(wù)于產(chǎn)品，更好地展現(xiàn)產(chǎn)品在不同環(huán)境下的布局樣式。

因此不建議用你的產(chǎn)品去套用其他已有的柵格方案。每個產(chǎn)品都有個性，產(chǎn)品對應(yīng)的柵格解決方案也都是獨一無二的。

二、斷點的實際應(yīng)用案例

我以一款 B 端產(chǎn)品的斷點為案例，給你具體講講斷點的功能和應(yīng)用方法。

這款產(chǎn)品使用的是相對簡單的一種布局方式，見下圖。我還是要再強調(diào)一次，下圖中的柵格方案并不是唯一的標準解法，僅為一種最適合這款產(chǎn)品的解決方案，供你參考（圖有點小，可放大查看，下文也會有更清晰的大圖）：

由于考慮到產(chǎn)品的特性和開發(fā)的難易程度，這套柵格方案中設(shè)定了兩個定值：列（Column）的數(shù)量始終為 12 欄；間距（Gutter）的寬度始終是 24px：

先來講講這幾個斷點數(shù)值的含義。

1600px： 嚴格意義上來說，1600px 不算是一個斷點值。這是我們畫設(shè)計稿使用的畫布寬度。頁面中柵格的最大總寬度（也是有效的內(nèi)容區(qū)）為 1280px：

也就是說當頁面再被拉長時，柵格的總寬度始終為 1280px，只有邊距（Margin）會不斷增加。頁面的內(nèi)容布局不會發(fā)生變化：

當然，我們?nèi)绻褂闷渌麛?shù)值比如 1440px 或 1400px 作為畫布尺寸也是可以的，其它數(shù)值也會相應(yīng)變化。

1344px： 這個斷點值用于確定頁面邊距的第一個固定寬度是32px。當頁面的寬度從 1600px 向 1344px 的靠近時，頁面的邊距會不斷縮小，直到達到 32px 這個最小值：

也就是說，當頁面寬度在 1344px-640px 之間變化時，邊距始終是32px，改變的只是柵格每一列的寬度，頁面的內(nèi)容布局也不會發(fā)生變化：

640px：這個斷點值用于確定頁面邊距的第二個固定寬度 16px。也就是說當頁面寬度小于等于 640px 時，邊距始終是16px，只改變柵格每一列的寬度：

這時頁面就適用于Pad 設(shè)備，頁面的布局會在達到 640px 時進行直接改變：

375px： 這個斷點值用于確定內(nèi)容區(qū)最小寬度為 343px，不過這是建立在手機尺寸唯一的理想基礎(chǔ)上。由于手機型號不同，所以實際上小于 343px 的內(nèi)容區(qū)域也是存在的，可以通過改變欄寬實現(xiàn)寬度的變化：

這時頁面就適用于手機設(shè)備，頁面的布局會在達到 375px 時進行直接改變。也可以根據(jù)產(chǎn)品的特點來決定是否沿用 640px 的布局樣式：

所以我們可以看到，整個產(chǎn)品有三個主要的斷點，布局有三種主要的樣式：

1. 當頁面寬度大于 640px 時是一種布局，即斷點 1344px 的頁面布局樣式（適用于 PC ）；
2. 當頁面寬度在 640px-375px 之間時是一種布局，即斷點 640px 的頁面布局樣式（適用于 Pad）；
3. ?當頁面寬度小于等于 375px 時，是一種頁面布局樣式（適用于手機）。

我們現(xiàn)在所有的頁面都使用 12 列柵格，你也可以根據(jù)你的產(chǎn)品設(shè)計樣式，將 375px 頁面中的 12 列柵格變成 4 列柵格。還是要再強調(diào)一次，這套柵格方案及其中的數(shù)據(jù)并不是唯一的解法或行業(yè)標準，只是最適合這款產(chǎn)品的方案，僅供你學(xué)習參考：

我們在和開發(fā)做對接時，也是用這張圖做講解，讓雙方對布局規(guī)則達成一致，初步確定基礎(chǔ)數(shù)值和使用規(guī)范。

#專欄作家#

元堯，微信公眾號：長弓小子，人人都是產(chǎn)品經(jīng)理專欄作家。一線互聯(lián)網(wǎng)大廠B端體驗設(shè)計師，清華大學(xué)美術(shù)學(xué)院本碩連讀。曾負責國內(nèi)最大開源組件庫Ant Design組件的設(shè)計和運營工作，目前負責國際業(yè)務(wù)線B端產(chǎn)品體驗設(shè)計和組件庫的搭建工作。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。