今天分(fēn)享一個(gè)很多(duō)設計師頭疼已久的(de)問題，關于網頁響應式布局原理(lǐ)和(hé)設計方法。文章(zhāng)主要包含三個(gè)部分(fēn)：

響應式頁面是什(shén)麽 

響昆山網站優化(huà)應式布局的(de)規則

響應式的(de)設計流程

響應式頁面是什(shén)麽

在過去，網站通(tōng)常就是爲了(le)電腦(nǎo)大(dà)屏幕展示而設計，如果用(yòng)手機訪問，隻能在巴掌大(dà)的(de)屏幕裏看縮小版的(de)頁面。雖然還(hái)有手機專供的(de) WAP 頁面，但因爲太簡陋也(yě)無濟于事昆山網站優化(huà)。

随著(zhe)智能手機、3G、4G、HTML5 的(de)普及，使用(yòng)手機訪問網站的(de)人(rén)越來(lái)越多(duō)，爲了(le)讓用(yòng)戶在手機上看到更合适的(de)布局，且兼顧開發的(de)效率，響應式的(de)概念就被提出了(le)。  通(tōng)俗解釋，就是通(tōng)過一套代碼，可(kě)以無縫匹配昆山網站優化(huà)符合電腦(nǎo)、平闆、手機預覽效果的(de)前端技術。

雖然響應式的(de)應用(yòng)越來(lái)越廣泛，但是從零開始去寫一個(gè)響應式效果的(de)網站對(duì)于程序員(yuán)來(lái)講是非常複雜(zá)的(de)，因爲當中包含了(le)大(dà)量的(de)邏輯、判斷、适配内容。

響應式适合應用(yòng)在一些簡單的(de)昆山網站優化(huà)官網、展示類頁面，展示的(de)内容大(dà)緻相同。而自适應适合應用(yòng)在需要在不同客戶端類型有較大(dà)差異的(de)網站，這(zhè)樣隻使用(yòng)一套前端代碼就完全行不通(tōng)了(le)。

響應式布局的(de)規則

響應式布局的(de)規則并不是特别複雜(zá)，隻要注意兩個(gè)問題：分(fēn)昆山網站優化(huà)段響應規則和(hé)組件寬度适應。

1. 分(fēn)段響應規則  敲黑(hēi)闆，響應式的(de)響應，面向的(de)核心對(duì)象是浏覽器窗(chuāng)口的(de)寬度，而不是設備類型。所以打開使用(yòng)響應式的(de)網站，我們通(tōng)過改變浏覽器的(de)寬度，就可(kě)以看見不同的(de)展示效果。

我昆山網站優化(huà)們可(kě)以發現，浏覽器寬度每達到一個(gè)數值（Breakpoint）的(de)時(shí)候，頁面的(de)排版和(hé)樣式就會發生明(míng)顯的(de)變化(huà)，而這(zhè)就是響應式設計最重要的(de)功能 —— 分(fēn)段展示。

也(yě)就是說，響應式規則就是爲頁面分(fēn)配不同的(de)寬度區(qū)間昆山網站優化(huà)，每個(gè)區(qū)間有各自展示的(de)樣式，用(yòng)來(lái)應對(duì)不同的(de)場(chǎng)景和(hé)設備類型，常見的(de)适配區(qū)間大(dà)緻如下(xià)：  包含圖片截圖 320-800 ：移動端收集屏幕 800-1200：平闆或上網本屏幕 1200-無窮：一般的(de)電腦(nǎo)顯示昆山網站優化(huà)器  面對(duì)分(fēn)段式的(de)布局、樣式變更，我們就要關注到底發生了(le)哪些變化(huà)。總結起來(lái)，可(kě)以簡單的(de)歸納成三種組件的(de)調整：内容增減、布局調整、樣式調整。

第一種，内容增減。即部分(fēn)模塊在不同的(de)分(fēn)段内會有顯示和(hé)隐藏的(de)狀态昆山網站優化(huà)，尤其是一些網頁端的(de)内容覺得(de)在小屏幕上展示會太多(duō)了(le)，就在小屏幕場(chǎng)景中隐藏掉。

第二種，布局調整。主要是模塊的(de)排列和(hé)順序發生變化(huà)，常見的(de)就是模塊一行的(de)列數發生改變。

第三種，樣式變更。即針對(duì)不同的(de)分(fēn)段設計完昆山網站優化(huà)全不一樣的(de)樣式，最多(duō)應用(yòng)在導航欄的(de)設計中，會爲最小的(de)分(fēn)段使用(yòng) iOS 的(de) Tabbar 或安卓的(de) Menu 樣式。

所以，歸納起來(lái)，就是頁面針對(duì)不同的(de)分(fēn)段展示不同的(de)結果，即頁面中的(de)組件觸發了(le)對(duì)應的(de)變化(huà)類昆山網站優化(huà)型。每個(gè)組件都可(kě)以應用(yòng)不同的(de)變化(huà)類型，而無需進行統一。

2. 組件寬度适應，分(fēn)段式響應，是響應式布局的(de)第一層邏輯。而在觸發關鍵值（Breakpoint） 之間的(de)區(qū)間，我們拖動窗(chuāng)口的(de)寬度，會發現組件的(de)寬度昆山網站優化(huà)也(yě)随之改動，這(zhè)就是 —— 組件寬度适應。

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

如果對(duì)軟件響應式功能了(le)解昆山網站優化(huà)不全面的(de)同學，就可(kě)以自己多(duō)搜索一下(xià)對(duì)應的(de)說明(míng)，我就不在這(zhè)裏過多(duō)的(de)展開了(le)。

響應式的(de)設計流程

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

設計界昆山網站優化(huà)面要吻合編程的(de)真實方法和(hé)需求，而不是根據我們想怎麽做(zuò)就怎麽做(zuò)，所以整個(gè)流程不能隻站在設計師自身的(de)角度考慮，而要和(hé)前端程序員(yuán)緊密溝通(tōng)，首先确定響應幾個(gè)寬度區(qū)間，以及它們對(duì)應的(de)數值分(fēn)别是多(duō)少。

然後我們就要昆山網站優化(huà)完成對(duì)應數量頁面的(de)設計，因爲前面我們說過，分(fēn)段響應規則中會有明(míng)顯的(de)樣式變動，這(zhè)就要求設計師是一定要給出設計示例的(de)，而不能依靠口頭描述或程序員(yuán)自由發揮。

隻要根據上述的(de)流程，在遇到不确定或者不清楚的(de)情況，昆山網站優化(huà)就和(hé)前端程序員(yuán)做(zuò)溝通(tōng)，那麽很快(kuài)就可(kě)以将項目輸出出來(lái)。