編輯導(dǎo)語(yǔ)：柵格是是B端產(chǎn)品和設(shè)計(jì)師每天接觸最多的組件，對(duì)于B端設(shè)計(jì)師來(lái)說(shuō)它并不陌生，但是該如何更好的了解它的結(jié)構(gòu)和作用，如何更好地運(yùn)用它，許多人并不清楚。本文就一些大眾的問(wèn)題進(jìn)行講解并回答，讓我們一起來(lái)看看吧！

大家好，我是子璐～

今天為大家分享的是柵格下篇「柵格在響應(yīng)式設(shè)計(jì)中的運(yùn)用」

響應(yīng)式布局這個(gè)名詞相信大部分設(shè)計(jì)師都不陌生，也能清楚知道它的基本呈現(xiàn)效果。但具體操作及與開(kāi)發(fā)人員協(xié)作時(shí)，許多專業(yè)名詞讓人難以理解，你是否也產(chǎn)生過(guò)如下疑問(wèn)??：

寬度單位用百分比還是px，或者rem，他們之間的區(qū)別是什么？

響應(yīng)式和自適應(yīng)傻傻分不清楚，兩者有何區(qū)別和聯(lián)系？

什么是斷點(diǎn)？什么是媒體查詢？

一、響應(yīng)式概述

1. 歷史長(zhǎng)廊

在早期，硬件設(shè)備落后，開(kāi)發(fā)人員開(kāi)發(fā)網(wǎng)頁(yè)采用的主要是固定布局（也稱為靜態(tài)布局），固定布局是將其內(nèi)容設(shè)置為固定的的像素寬度（px）

后隨技術(shù)發(fā)展，瀏覽器增多，開(kāi)發(fā)人員忙著兼容各種瀏覽器。出現(xiàn)了流式布局和彈性布局，內(nèi)容使用百分比（%）確定寬度。

2010年，CSS3正式上線，同時(shí)推出了響應(yīng)式布局，2012年推出了媒體查詢（也叫斷點(diǎn)，這個(gè)概念后面再具體展開(kāi)解釋）。媒體查詢可以移動(dòng)內(nèi)容，改變文字大小，隱藏或顯示內(nèi)容塊，調(diào)整邊距和空白，以及調(diào)整其他的CSS樣式。因?yàn)橛辛诉@兩個(gè)東西，上線以后，自適應(yīng)布局和響應(yīng)式布局就作為更先進(jìn)的布局用法而被迅速地使用。

2. 響應(yīng)式和自適應(yīng)的區(qū)別

自適應(yīng)和響應(yīng)式布局初學(xué)者經(jīng)常會(huì)混淆，他們的原理確實(shí)是非常相似的，都是檢測(cè)設(shè)備。先來(lái)看下他們的區(qū)別：

1）自適應(yīng)（Adaptive）

基于用戶體驗(yàn)，技術(shù)人員至少需要開(kāi)發(fā)三套界面，將差別較大的屏幕尺寸（如PC端、手機(jī)端、平板端），去創(chuàng)建多個(gè)不同的設(shè)計(jì)稿，每一個(gè)設(shè)計(jì)稿去對(duì)應(yīng)一個(gè)用戶實(shí)際的尺寸范圍，根據(jù)預(yù)先設(shè)置的判斷標(biāo)準(zhǔn)范圍進(jìn)行適配。像大多數(shù)的平臺(tái)網(wǎng)站、商城網(wǎng)站都使用自適應(yīng)技術(shù)進(jìn)行開(kāi)發(fā)。

2）響應(yīng)式（Responsive）

技術(shù)人員只需開(kāi)發(fā)一套界面，而不是為每個(gè)終端做一個(gè)特定的版本，在代碼中嵌入一些布局的判斷，通過(guò)檢測(cè)不同分辨率，代碼自動(dòng)進(jìn)行處理，實(shí)現(xiàn)布局變化、尺寸縮放等，實(shí)現(xiàn)不同布局和內(nèi)容適配。

此時(shí)設(shè)計(jì)師看到這是不是會(huì)有疑問(wèn)??，怎么判斷一個(gè)線上的網(wǎng)址是響應(yīng)式還是自適應(yīng)呢？

有個(gè)很簡(jiǎn)單的方法：同一個(gè)頁(yè)面在不同尺寸的屏幕上訪問(wèn)時(shí)，看網(wǎng)址是否一樣，只有一個(gè)網(wǎng)址為響應(yīng)式，有多個(gè)不同的網(wǎng)址為自適應(yīng)

3. 如何選擇用自適應(yīng)還是響應(yīng)式

使用響應(yīng)式：網(wǎng)站功能不多，用戶交互少，升級(jí)低頻或主要使用場(chǎng)景在桌面端，建議使用響應(yīng)式。響應(yīng)式成本較低，從運(yùn)營(yíng)的難易和維護(hù)的便利性考慮會(huì)更好，只要搞定網(wǎng)頁(yè)端，其他的也都搞定了。例如官網(wǎng)、B端后臺(tái)

使用自適應(yīng)：需要兼顧用戶在桌面端、Pad端、移動(dòng)端等多個(gè)設(shè)備間的操作習(xí)慣，或從頁(yè)面?zhèn)€性化多功能方面考慮，自適應(yīng)設(shè)計(jì)更合適。因?yàn)檫@樣可以更好的為用戶提供功能全面，用戶體驗(yàn)更好的界面。例如功能復(fù)雜、用戶交互頻繁的網(wǎng)站、電商類網(wǎng)站，用戶量較大的網(wǎng)站選擇自適應(yīng)更合適。

二、為什么用柵格系統(tǒng)來(lái)進(jìn)行響應(yīng)式設(shè)計(jì)

響應(yīng)式可以響應(yīng)的前提有兩點(diǎn)：

1. 頁(yè)面布局具有規(guī)律性
2. 擺脫像素，元素寬高用百分比代替固定數(shù)值，容器按比例實(shí)現(xiàn)

而柵格系統(tǒng)頁(yè)面布局具有規(guī)律性、元素寬高可用百分比表示，這兩點(diǎn)正是柵格系統(tǒng)本身就具有的典型特點(diǎn)，我們透過(guò)柵格化布局的設(shè)計(jì)系統(tǒng)為響應(yīng)式適配打下良好的基礎(chǔ)。

三、如何利用柵格進(jìn)行響應(yīng)式設(shè)計(jì)

1. 響應(yīng)式適配方式

定義響應(yīng)式規(guī)則時(shí)，還需結(jié)合業(yè)務(wù)的屬性去制定。那在布局時(shí)，內(nèi)容區(qū)模塊結(jié)構(gòu)如何變化呢？簡(jiǎn)單介紹幾種常見(jiàn)的變化形式：

1）拉伸布局

布局不變，內(nèi)容在屏幕顯示區(qū)域內(nèi)進(jìn)行相對(duì)拉伸，以達(dá)到布局完整。

如下圖微信公眾號(hào)后臺(tái)的卡片適配采用的就是拉伸布局的形式，這種實(shí)現(xiàn)方式成本低，在響應(yīng)式中大量的被運(yùn)用。

2）等比縮放

布局不變，內(nèi)容在屏幕的相對(duì)位置進(jìn)行等比例縮放，這種方式不會(huì)產(chǎn)生任何布局重構(gòu)影響，適配簡(jiǎn)單。?

一般在帶有圖片顯示場(chǎng)景中使用，如站酷的布局采用的就是這種形式，需要注意圖片素材放大后清晰度的問(wèn)題。

3）擴(kuò)展布局

布局不變，內(nèi)容可靈活按照屏幕比例進(jìn)行增加或減少、擴(kuò)展為多行或多列等。首先需要通過(guò)最小單位選擇一個(gè)基本尺寸，然后以基本尺寸的倍數(shù)構(gòu)建每個(gè)盒子框，就會(huì)出現(xiàn)一個(gè)個(gè)網(wǎng)格

如下圖花瓣的布局頁(yè)面所示，在網(wǎng)頁(yè)收縮過(guò)程中，經(jīng)過(guò)一個(gè)斷點(diǎn)就會(huì)自動(dòng)減少最邊緣元素，其他元素基本保持不變。柵格列數(shù)隨著瀏覽器寬度的減少而減少，邊緣圖塊自動(dòng)換行，或者有時(shí)會(huì)溢出滾動(dòng)條。采用此方案需要做數(shù)據(jù)源的補(bǔ)足，保證內(nèi)容展示合理。

4）固定布局

以像素px作為頁(yè)面的基本單位，內(nèi)容不會(huì)隨著本身窗口寬度進(jìn)行改變，窗口縮小后時(shí)內(nèi)容會(huì)被遮擋

如人人都是產(chǎn)品經(jīng)理網(wǎng)站?，整個(gè)網(wǎng)站采用的是固定布局，并沒(méi)有進(jìn)行適配。可用性不強(qiáng)，屏幕分辨率過(guò)小時(shí)內(nèi)容會(huì)被遮擋

5）分欄布局

布局改變，充分利用不同設(shè)備、不同屏幕尺寸的差異化，通過(guò)分欄布局形式重新對(duì)內(nèi)容展示做位置變化，進(jìn)行整個(gè)屏幕更合理化的分配。此布局頁(yè)面結(jié)構(gòu)產(chǎn)生變化，需要重構(gòu)UI框架，有一定的開(kāi)發(fā)成本。

6）混合布局

很多時(shí)候，單一方式的布局響應(yīng)無(wú)法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡(jiǎn)單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)，后面內(nèi)容會(huì)講到）保持統(tǒng)一邏輯。

否則頁(yè)面實(shí)現(xiàn)太過(guò)復(fù)雜也會(huì)影響整體體驗(yàn)和頁(yè)面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。

以Ant Design Pro的響應(yīng)方式為例，就采用了混合布局，分別運(yùn)用了拉伸布局+擴(kuò)展布局+分欄布局+固定布局

2. 響應(yīng)式策略

響應(yīng)策略就是當(dāng)視窗（Viewport）發(fā)生變化時(shí)，內(nèi)容區(qū)域的元素如何去響應(yīng)，具體到我們當(dāng)前的柵格系統(tǒng)，就是Columns、Gutters、Margins以及由Columns跟Gutter組成的盒子（Box）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁(yè)面的布局如何調(diào)整。

這里我們有個(gè)概念需要先了解一下：

斷點(diǎn)：每個(gè)視窗寬度的最小值是觸發(fā)響應(yīng)的關(guān)鍵值，這個(gè)關(guān)鍵值即斷點(diǎn)。斷點(diǎn)是具有特定布局要求的預(yù)定屏幕尺寸的范圍，在給定的斷點(diǎn)范圍內(nèi)，布局會(huì)根據(jù)屏幕大小和方向進(jìn)行調(diào)整，超出范圍則相當(dāng)于達(dá)到某個(gè)臨界點(diǎn)，界面布局會(huì)發(fā)生變化。

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

你會(huì)發(fā)現(xiàn)它在 576、768、992 的尺寸中，頁(yè)面布局發(fā)生變化，然后根據(jù)屏幕斷點(diǎn)之間的頁(yè)面布局，采用向下兼容的適配方式,響應(yīng)策略如下圖

需要特殊說(shuō)明的是，在該套響應(yīng)策略中，頁(yè)面最小響應(yīng)到576的頁(yè)面寬度，當(dāng)視窗到達(dá)這個(gè)寬度時(shí)，瀏覽器會(huì)限制視窗進(jìn)一步縮小，因?yàn)楫?dāng)頁(yè)面寬度比它還小時(shí)已經(jīng)無(wú)法有效展示數(shù)據(jù)了，所以進(jìn)一步的縮放是毫無(wú)意義的。

3. 案例-工作臺(tái)適配

上篇中我們已經(jīng)完成了基準(zhǔn)尺寸1440*900px的設(shè)計(jì)，那下面筆者仍然以這個(gè)案例教大家如何進(jìn)行適配。

首先我們先來(lái)分析一下，內(nèi)容區(qū)域根據(jù)寬度定義一般都兩種方式

1）內(nèi)容區(qū)域定寬

內(nèi)容區(qū)域定寬是指內(nèi)容區(qū)域在每一組視窗寬度區(qū)間內(nèi)，都會(huì)設(shè)定一個(gè)最大值（Max-with），當(dāng)內(nèi)容區(qū)域?qū)挾刃∮谧畲笾禃r(shí)，區(qū)域內(nèi)元素會(huì)響應(yīng)視窗的變化；達(dá)到最大值后，內(nèi)容區(qū)域不再響應(yīng)視窗的變化，而是寬度保持該最大寬度值不變，此時(shí)我們通過(guò)增加頁(yè)面兩側(cè)的margin值來(lái)響應(yīng)視窗的變化。Flex Margin就是應(yīng)對(duì)此情況的動(dòng)態(tài)頁(yè)邊距

??2）內(nèi)容區(qū)域?qū)挾攘魇?/strong>