今天分享一個很多設(shè)計師頭疼已久的問題，關(guān)于網(wǎng)頁響應(yīng)式布局原理和設(shè)計方法。文章主要包含三個部分：

響應(yīng)式頁面是什么 

響昆山網(wǎng)站優(yōu)化應(yīng)式布局的規(guī)則

響應(yīng)式的設(shè)計流程

響應(yīng)式頁面是什么

在過去，網(wǎng)站通常就是為了電腦大屏幕展示而設(shè)計，如果用手機訪問，只能在巴掌大的屏幕里看縮小版的頁面。雖然還有手機專供的 WAP 頁面，但因為太簡陋也無濟于事昆山網(wǎng)站優(yōu)化。

隨著智能手機、3G、4G、HTML5 的普及，使用手機訪問網(wǎng)站的人越來越多，為了讓用戶在手機上看到更合適的布局，且兼顧開發(fā)的效率，響應(yīng)式的概念就被提出了。  通俗解釋，就是通過一套代碼，可以無縫匹配昆山網(wǎng)站優(yōu)化符合電腦、平板、手機預(yù)覽效果的前端技術(shù)。

雖然響應(yīng)式的應(yīng)用越來越廣泛，但是從零開始去寫一個響應(yīng)式效果的網(wǎng)站對于程序員來講是非常復(fù)雜的，因為當(dāng)中包含了大量的邏輯、判斷、適配內(nèi)容。

響應(yīng)式適合應(yīng)用在一些簡單的昆山網(wǎng)站優(yōu)化官網(wǎng)、展示類頁面，展示的內(nèi)容大致相同。而自適應(yīng)適合應(yīng)用在需要在不同客戶端類型有較大差異的網(wǎng)站，這樣只使用一套前端代碼就完全行不通了。

響應(yīng)式布局的規(guī)則

響應(yīng)式布局的規(guī)則并不是特別復(fù)雜，只要注意兩個問題：分昆山網(wǎng)站優(yōu)化段響應(yīng)規(guī)則和組件寬度適應(yīng)。

1. 分段響應(yīng)規(guī)則  敲黑板，響應(yīng)式的響應(yīng)，面向的核心對象是瀏覽器窗口的寬度，而不是設(shè)備類型。所以打開使用響應(yīng)式的網(wǎng)站，我們通過改變?yōu)g覽器的寬度，就可以看見不同的展示效果。

我昆山網(wǎng)站優(yōu)化們可以發(fā)現(xiàn)，瀏覽器寬度每達(dá)到一個數(shù)值（Breakpoint）的時候，頁面的排版和樣式就會發(fā)生明顯的變化，而這就是響應(yīng)式設(shè)計最重要的功能 —— 分段展示。

也就是說，響應(yīng)式規(guī)則就是為頁面分配不同的寬度區(qū)間昆山網(wǎng)站優(yōu)化，每個區(qū)間有各自展示的樣式，用來應(yīng)對不同的場景和設(shè)備類型，常見的適配區(qū)間大致如下：  包含圖片截圖 320-800 ：移動端收集屏幕 800-1200：平板或上網(wǎng)本屏幕 1200-無窮：一般的電腦顯示昆山網(wǎng)站優(yōu)化器  面對分段式的布局、樣式變更，我們就要關(guān)注到底發(fā)生了哪些變化?？偨Y(jié)起來，可以簡單的歸納成三種組件的調(diào)整：內(nèi)容增減、布局調(diào)整、樣式調(diào)整。

第一種，內(nèi)容增減。即部分模塊在不同的分段內(nèi)會有顯示和隱藏的狀態(tài)昆山網(wǎng)站優(yōu)化，尤其是一些網(wǎng)頁端的內(nèi)容覺得在小屏幕上展示會太多了，就在小屏幕場景中隱藏掉。

第二種，布局調(diào)整。主要是模塊的排列和順序發(fā)生變化，常見的就是模塊一行的列數(shù)發(fā)生改變。

第三種，樣式變更。即針對不同的分段設(shè)計完昆山網(wǎng)站優(yōu)化全不一樣的樣式，最多應(yīng)用在導(dǎo)航欄的設(shè)計中，會為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。

所以，歸納起來，就是頁面針對不同的分段展示不同的結(jié)果，即頁面中的組件觸發(fā)了對應(yīng)的變化類昆山網(wǎng)站優(yōu)化型。每個組件都可以應(yīng)用不同的變化類型，而無需進(jìn)行統(tǒng)一。

2. 組件寬度適應(yīng)，分段式響應(yīng)，是響應(yīng)式布局的第一層邏輯。而在觸發(fā)關(guān)鍵值（Breakpoint） 之間的區(qū)間，我們拖動窗口的寬度，會發(fā)現(xiàn)組件的寬度昆山網(wǎng)站優(yōu)化也隨之改動，這就是 —— 組件寬度適應(yīng)。

組件寬度適應(yīng)在手機 UI 的適配中非常重要，即完成不同屏幕寬的手機適配所應(yīng)用的邏輯，所下面我們簡單講講它的規(guī)則。組件的寬度適應(yīng)模式主要有兩種類型，一種是容器寬度昆山網(wǎng)站優(yōu)化適應(yīng)，一種是容器比例縮放。容器是一個比較抽象的概念，類似設(shè)計軟件中的編組，它集合了所有下級元素，但本身并沒有實際的內(nèi)容和樣式。在響應(yīng)式規(guī)則中，下級元素并不會和這個容器等比變動。

如果對軟件響應(yīng)式功能了解昆山網(wǎng)站優(yōu)化不全面的同學(xué)，就可以自己多搜索一下對應(yīng)的說明，我就不在這里過多的展開了。

響應(yīng)式的設(shè)計流程

響應(yīng)式設(shè)計是一種源自技術(shù)的概念，而不是單純的設(shè)計風(fēng)格、方法，所以設(shè)計響應(yīng)式設(shè)計其實就是 「面向編程設(shè)計」。

設(shè)計界昆山網(wǎng)站優(yōu)化面要吻合編程的真實方法和需求，而不是根據(jù)我們想怎么做就怎么做，所以整個流程不能只站在設(shè)計師自身的角度考慮，而要和前端程序員緊密溝通，首先確定響應(yīng)幾個寬度區(qū)間，以及它們對應(yīng)的數(shù)值分別是多少。

然后我們就要昆山網(wǎng)站優(yōu)化完成對應(yīng)數(shù)量頁面的設(shè)計，因為前面我們說過，分段響應(yīng)規(guī)則中會有明顯的樣式變動，這就要求設(shè)計師是一定要給出設(shè)計示例的，而不能依靠口頭描述或程序員自由發(fā)揮。

只要根據(jù)上述的流程，在遇到不確定或者不清楚的情況，昆山網(wǎng)站優(yōu)化就和前端程序員做溝通，那么很快就可以將項目輸出出來。