【原創】響應式網頁設計基礎【從零開始】

響應式網頁設計基礎【從零開始】

現在的互聯網事業日新月異，可謂一日千里。響應式網頁設計憑藉其能爲開發者提升開發效率，下降維護成本，提高用戶體驗等突出優點更是爲Web 2.0時代掀起了又一股狂潮，導致無數開發者傾心致力於響應式網頁設計。紛紛爲響應式設計貢獻本身的綿薄之力，固然各大軟件製造上確定不會放過如此良機，也紛紛推出各種響應式設計軟件。理所固然不乏優秀之做：

• Groundwork，一款開源的響應式設計工具，在Github上能夠找到其項目源代碼。Groundwork提供多套通用響應式頁面模版，用於快速構建Web響應式應用程序。此外，它還提供豐富的UI組件，詳情能夠訪問Groundwork官網。
• FROONT,一個網頁版的響應式開發工具。提供在線編輯，佈局調整，以及在不一樣臨界值之間切換預覽等響應式開發必備功能，還能導出html/css文件，實屬強大的響應式開發工具，更具體的介紹請參看FROONT官網，註冊並登陸便可體驗在線響應式開發。
• Adobe Edge Reflow CC，由世界著名軟件大戶Adobe公司開發的響應式網頁設計軟件。和Adobe Dreamweaver、Adobe Photoshop等知名軟件同樣，Adobe Edge Reflow CC是一款桌面應用程序，配合Adobe Edge Inspect CC可在各類移動設備之間進行響應式實時開發調試，我認爲這無疑是目前爲止最好的響應式網頁設計軟件。

接下來將對如何使用Adobe Edge Reflow CC進行響應式網頁設計，以及使用Adobe Edge Inspect CC進行調試作詳細介紹。

安裝Reflow和Inspect

Adobe最新推出了Adobe Creative Cloud，用於管理全部Adobe軟件，包括下載、更新等。界面以下：

若是已經安裝過Adobe Creative Cloud，那麼能夠直接經過它下載並安裝Reflow和Inspect。若是未安裝過Adobe Creative Cloud，能夠直接經過https://creative.adobe.com/products/reflow?promoid=KFKMR下載Adobe Edge Reflow CC，系統會自動提示下載安裝Adobe Creative Cloud，Adobe Edge Inspect CC安裝方法雷同，不作贅述。

Adobe Edge Reflow CC界面初識

Reflow 的用戶界面如上圖所示。從界面來看，目前的Reflow功能還頗有限，好比：工具箱目前只有四個選項。可是，其強大之處不在於此，在於響應式的支持。下面咱們一一來介紹各個部分。

首先，頂部灰色的一條菜單欄與其餘軟件沒有太大差別，使用過windows系統的用戶應該都很熟悉，很少廢話。

接下來軟件主體區域分爲左右兩個部分，左側最上面一行是工具箱，如圖所示包含四個工具，分別是選擇工具、添加盒子、添加文本和添加圖片。

• 選擇工具，用於選擇盒子，拖動改變位置，設置CSS樣式等。
• 添加盒子，用於在界面上建立一個佈局盒子，編譯後會對應生成一個div標籤。
• 添加文本，用於在盒子中建立文本輸入區，編譯後會對應生成一個p標籤。
• 添加圖片，用於在盒子中建立圖片元素，編譯後會對應生成一個img標籤。

介紹完這些工具，我發表一下本身對Reflow的我的見解。從目前Reflow提供的工具而言，Reflow對html結構的展示支持並無Dreamweaver等編輯器強大，數完了也不過div、p、img三個標籤，對語義化html結構的支持可謂少之又少，所以，我認爲Reflow徹底是爲響應式佈局而生。而在使用Reflow完成響應式模塊佈局以後，模塊內部的內容區域樣式和結構的實現，仍是須要藉助於像Sublime Text或Dreamweaver等這類更專業的網頁編程軟件來實現。

右側是軟件最主要的區域，各個相應臨界值下的個性化佈局徹底在這片區域中實現。截圖中標出了右側上部的彩色條爲臨界值標識區，這裏的臨界值並不是固定不變的，徹底能夠根據用戶需求定製，點擊右側的添加臨界值的加號按鈕，能夠建立一個可左右拖動的三角標，經過左右拖動來肯定臨界值，很是的方便。

右側下方是網格區域，用戶能夠在view-Grid菜單中設置網格屬性。點擊標尺上方各個臨界值區域的彩色條紋，可迅速將畫布調整至目標尺寸，而後針對不一樣尺寸，調整畫布網格中的盒子的佈局效果，當各個臨界尺寸的佈局都調整好以後，咱們保存項目，點擊F12或view-Preview in Chrome在Chrome瀏覽器中預覽相應效果。

在添加臨界值的加號按鈕下方還有一個叫Edge Inspect CC的按鈕，主要用於結合Adobe Edge Inspect CC進行移動端的真機調試。Inspect啓動先後效果圖以下：

Adobe Edge Inspect CC啓動後，點擊該按鈕，會出現一個主機在浮層中，移動設備經過Inspect移動端添加相應主機後，當前設計中的頁面便會出如今移動設備的屏幕上，當佈局修改後，點擊浮層右下角的刷新按鈕，能夠遠程控制刷新移動端的頁面，以查看最新的顯示效果，很是方便。還能夠點擊右下角的全屏按鈕，改變移動端的顯示效果。

一個案例教會你響應式網頁設計

第一步，打開Adobe Edge Reflow CC，新建一個名爲responsive的項目。使用Add a Box工具，在畫布上繪製四個盒子，而後使用Selection Tool分別選中每一個盒子，在styling面板中添加不一樣的背景色來便於區分，而後分別爲每一個盒子添加文字標註。點擊畫布右上角的加號按鈕，添加幾個經常使用臨界值（如：240，320，480，640等），固然，你也能夠先定臨界值，而後添加盒子。最終效果大體如圖：

由圖可知，當前佈局是針對屏幕分辨率寬爲480的設備設計的，下面咱們分別調整其餘幾個尺寸的佈局，先看分辨率寬爲240的：

接下來是分辨率寬爲320的：

再看針對iPhone 4s等具備高清retina屏幕的分辨率寬爲640的：

到目前爲止，實際上已經能夠測試看效果了，可是爲了兼容PC瀏覽器，咱們再添加一個大分辨率的佈局效果：

好了，如今咱們使用Chrome看看在各類分辨率上的顯示效果，別忘了先保存，而後F12：

在Chrome中的顯示效果我就不一一截圖了，結果應該和上面的佈局效果一致的，下面展現下在真機上的顯示狀況，設備有限，僅提供HTC EVO 3D（分辨率540x960）和iPad mini（分辨率760x1024）的效果。首先，啓動Adobe Edge Inspect CC，而後點擊Reflow右上角的Edge Inspect CC按鈕打開主機列表，而後打開移動設備端的Inspect CC軟件，HTC端如圖：

點擊右上角的「+」按鈕，添加與Inspect CC中對應的主機IP：

輸入主機地址後，點擊加入將獲得passcode，接下來以下操做：

在Reflow中的Inspect中輸入passcode後點擊對應設備右側的「勾」按鈕，就能夠在移動設備上看到顯示效果了：

以上是針對HTC的操做，針對iPad的操做大同小異，在此再也不重複，下面看下iPad上的顯示效果：

好了，到此咱們基於Adobe Edge Reflow CC的響應式案例製做就告一段落。

PC端多瀏覽器兼容性問題

咱們知道，在PC上有多種瀏覽器產商，而他們各自對標準的支持都各有特點，並不統一。對於以上案例，只能保證在對標準支持良好的瀏覽器中（好比Chrome、Firefox、IE8+等）才能很好的響應，而在IE8及如下瀏覽器中並不能獲得完美的響應，只能已固定佈局進行百分比縮放，這樣就會出現如下尷尬的狀況：

那怎麼辦呢？放棄低版本IE？嗯~~不太現實。不過咱們的前端開發工程師是潛能無限的，所謂兵來將擋水來土掩，山人自有妙計。具體如何處理，本文不作講解，詳情請參看《media query ie8- 兼容實現總結》，此文中做者對IE8及其如下版本瀏覽器的響應式實現作了詳細的闡釋。

補充說明

Adobe Edge Reflow CC使用很是方便，開發很是迅速。可是真正用於項目開發的時候還須要有一些細節的注意。項目編譯後會生成一個目錄結構如圖：

• *.rflw 是一個json格式的文本文件，存放的是項目相關數據，包括畫布中盒子結構，類型，位置等等一系列信息。
• assets 文件夾中存放的是生成的靜態文件css,html,images等。
• boilerplate.css 是一個響應式模版樣式文件，存放一些公共樣式。
• reflow.css 就是和咱們自定義結構息息相關的樣式信息了。
• xxx_preview.html 這個是咱們最終會使用到的預覽頁面，是最終生成的html結構。

這裏須要特別注意，Adobe Edge Reflow CC的響應式是基於Chrome的，在html文件中咱們會發現下面一段代碼：

<!-- lang: js -->
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (!is_chrome) {
    document.write("<p id='disclaimerTag'>Preview HTML generated by Reflow is meant to be viewed in Google Chrome and may not display correctly in other browsers.</p>");
}

這會致使在非Chrome瀏覽器中多出一段說明信息，在正式開發中咱們在使用以前應該先將這些多餘的結構清理掉。

總結

本文講到的都是一些有關響應式網頁設計的很是基礎的東西，實際項目開發會可貴多，與具體業務相關聯，也沒辦法講得很清楚，須要你們在實際操做的時候慢慢體會總結。