◆ ◆ ◆
一、響應式開發知識要點
本段內容由艾藝前端技術部jay給大家分享：
現在都流行說做響應式開發，然而什麼是響應式開發呢？
專業術語－響應式
簡單來說，就是頁面應該有能力去自動響應使用者的裝置環境。
響應式網頁設計就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。
當客戶提出需求的時候，用最簡潔易懂的語言告訴你的客戶，我們做的網頁能夠智慧型適配各種現代終端裝置。
說到各種現代終端裝置，就要說一下
移動端開發和響應式設計的區別。
正常的來說明：移動端是可以是針對某個裝置的固定尺寸去製作的頁面設計，也可以是應用響應式布局去相容各個移動終端。
洋氣的說法：移動端是新時代的產物。是響應式的網頁適應了移動端的時代。
那有了響應式是不是還需要移動端開發呢？當然需要！
這個要看客戶需求去合理制定解決方案，理由如下：
在這裡補充乙個知識點：
h5是什麼？
html5，就是html語言第五代。
html5的設計目的是為了在移動裝置上支援多**，可以真正改變使用者與文件的互動方式。（也不僅僅只等價於那種一張張滑動的宣傳頁。）
那麼做h5、做移動端設計、做響應式設計需要注意什麼呢？
1.公升級設計工具
2.公升級開發工具
3.瀏覽器
主要說一下瀏覽器的問題：one more browser
國產瀏覽器注意事項
國產瀏覽器的相容請寫清楚，針對性地去研究，因為實在太多。
另外要根據瀏覽器確定設計的框架尺寸
然而知道了適配尺寸之後事情並沒有結束，web版設計區域、豎屏的ui布局、橫屏的ui布局：
然後，還有很多然後……請聽下設計師們的分享……
◆ ◆ ◆
二、柵格知識要點
頁面寬度明明可以使用1200px的整數，但為什麼會出現1180、1160、1140、1120這些不湊整的寬度呢？
關於這個部分的知識點由艾藝創意設計部l.k.emon為大家解答：
首先來理解一下柵格的概念：
柵格柵格結構是最簡單最直接的空間資料結構，以規則的網格陣列來指導和規範網頁中的版面布局以及資訊分布。
那麼如何設計乙個柵格系統？
在網頁設計中，我們把寬度為「w」的頁面分割成n個網格單元「a」，每個單元與單元之間的間隙設為「i」,此時我們把「a+i」定義「a」。他們之間的關係如下：
w =（a×n）+（n-1）i
由於a+i=a，
可得：(a×n) – i = w
實例如圖：
300+300+300+300
= 1200px（開發實際寬度）
280+20+280+20+280+20+280
= 1180px（psd設計稿）
回答最初的疑問，因為在開發的過程中存在margin與padding的兩個概念
margin：外邊距
padding：內邊距
margin：10px； （i=20px）
再看圖來理解一下：
所以我們不能依賴『水平居中分布』自動排列工具
柵格化並不是乙個新的概念，大家關注的點往往是他表面的950、960和1190。
左邊的三個資料的核心是乙個24等分的柵格系統。可以被輕鬆的2 等分、3等分、4等分、6等分、8等分、12等分。
270+20+270+20+270+20+270
= 1140px （i=20）
275+20+275+20+275+20+275
= 1160px（i=20）
天貓：margin-right:8px；
294+8+294+8+294+8+294+8
= 1208-8
= 1200px（i=8）
1180寬度的**有：ui中國、uelike等
1180寬度支援1欄2欄3欄4欄5欄6欄8欄10欄等分時保持20px間距能夠被整除
設計稿參考線設定：左起370px、1550px
了解完以上柵格構成知識，那麼再來認識一下什麼是
響應式柵格系統。
即960、970、1140、1180、1280、1920寬度的8列、12列、16列、24列柵格系統
裝訂線通常為i=20px
photoshop 檢視》新建參考線版面
推薦尺寸（外國一些**一般採用12柵格系統）：
如果width = 1180，i=20，則 每列n=80
如圖：響應式開發過程中設計師提交給程式設計師的引數並不是
絕對畫素，程式設計師需要得到的資訊是
比例關係。
@media max-width：320px
@media max-width：480px
@media max-width：768px
@media max-width：1024px
@media max-width：1440px、1366px
100% / 12列 = 8.3333333%
.col-xs-12
.col-xs-11
.col-xs-10
.col-xs-9
.col-xs-8
.col-xs-7
.col-xs-6
.col-xs-5
.col-xs-4
.col-xs-3
.col-xs-2
.col-xs-1
以iphone 5s為例，螢幕的解析度是640x1136，倍率是2。
瀏覽器會認為螢幕的解析度是320x568，仍然是基準倍率的尺寸。
所以在製作頁面時，只需要按照基準倍率來就行了。
無論什麼樣的螢幕，倍率是多少，都按邏輯畫素尺寸來設計和開發頁面。
只不過在準備資源圖的時候，需要準備2倍大小的圖，通過**把它縮 成1倍大小顯示，才能保證清晰。
iphone5/5s的螢幕。倍率為2，邏輯畫素
320x568 （144dpi）
iphone 6的螢幕。倍率為2，邏輯畫素375x667 （144dpi）
◆ ◆ ◆
三、bootstrap設計布局規範
關於響應式、柵格，接下來就是設計布局規範了，這個部分的內容由艾藝網頁設計部小5為大家分享：
1. bootstrap響應式開發（我們公司最常用的框架，bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin（用來和柵格變數一同使用，為每個列column生成語義化的 css **）用於生成更具語義的布局。
2. 主頁面基本層次範例，大屏（適配pc端和pad）和小屏（適配手機）
左邊為框架示意，中間為大屏布局，右邊為小屏布局線框。
3. 柵格系統規則（基本知識在上文）
柵格系統是基於行（row）和列（column）的組合來建立頁面布局的，bootstrap框架的規則是每行（row）最多12列（column），大於12列的自動換到下一行顯示，排列原則是按從左到右，再從上到下的排列。每個內容模組的內容必須放置於「列（column）」內，並且只有列（column）可以作為行（row）的子元素。
（1）柵格化布局的基本示意圖
（2）布局和模組組合的例子
4. 整體**頁面設計及組成架構
整個**根據使用者訪問資訊的流程可以基本分為5大類。
頁面模組的區域劃分。紅色為固定區域；藍色為可變區域，設計時模組之間位置可以隨具體需求來調整。
對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的布局設計，頁面模板中每個模組的定義規則參考。
獨特的模板頁面
以上內容分享給同樣學習響應式設計或開發的你，希望給你帶來一些幫助！
關於響應式web設計
手機 電腦 平版 響應式 首先是 1 的設定 大多數手機的瀏覽器核心是居於webkit核心，且大多數瀏覽器都支援使用viewport meta元素覆蓋預設的畫布縮放。所以我們可以在head中插入乙個meta設定具體的寬度或者縮放比例。width device width 瀏覽器頁面的寬度等於裝置的寬...
Web端設計規範的價值
1.可復用性 有了完整的設計規範和對應的元件控制項。方便視覺和互動設計師反覆復用，不需要重複製作，減少工作量提高工作效率。2.統一性 有了統一的設計規範，設計師之間使用時，可避免自我創造元件控制項，保持團隊產品的統一性體驗。3.提公升能力 由於元件控制項的可復用，這直接使設計師的工作效率得到極大提高...
短短的 RESTful API 設計規範
二 狀態碼 三 伺服器回應 四 參考鏈結 restful 是目前最流行的 api 設計規範，用於 web 資料介面的設計。它的大原則容易把握，但是細節不容易做對。本文總結 restful 的設計細節，介紹如何設計出易於理解和使用的 api。restful的核心思想就是，客戶端發出的資料 操作指令都是...