問題的由來
在以蘋果主導的手機廠商，為了手機上能夠獲得正好的web體驗，很多瀏覽器都會"欺騙"瀏覽器返回一個較大的寬度，比如你的手機告訴瀏覽器的我想用1000px顯示當前的網頁，但是你的手機裝置的尺寸遠遠小於這個寬度，所以瀏覽器只能做一個縮放，這種體驗效果非常的不好。下面就說說如何實現一個響應的設計：

• 視口
  關於這個定義，你可以把視口看成一個視窗， 這個視窗決定了你看到的網頁的的大小。在移動端瀏覽器當中，存在著兩種視口，一種是可見視口（也就是我們說的裝置大小），另一種是視窗視口（網頁的寬度是多少）。什麼是可見視口，什麼又是視窗視口呢？ 舉一個例子：如果我們的螢幕是320畫素*480畫素的大小（iPhone4），假設在瀏覽器中，320畫素的螢幕寬度能夠展示980畫素寬度的內容。那麼320畫素的寬度就是可見視口的寬度，而能夠顯示的980畫素的寬度就是視窗視口的寬度。
• 視口的約束
  視口對於開發者來說並不是一個好的事情，是他讓響應式做起來不是很方便，（因為在移動端1000px過於大）並不是我們想要的數值。在移動端開發前，我們應該對視口進行約束。方法就是用一個name為ViewPort的meta進行標記，具體的約束規則可以寫在Content中，用逗號分開。如百度html <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">，至於這裡面的意思可以參考下H5的知識。

響應式實現

響應式的實現，我覺得具體可以分成兩種，1、是做成兩個站點和頁面，根據當前的手機的裝置去做跳轉;2、只有一個站點，根據螢幕的大小的自動適配

• 頁面跳轉
  
  • 頁面的跳轉的原理：是利用js,根據當前的裝置跳轉不同的站點，如device.js
• 流佈局
  • 流佈局的定義是利用百分比來設定寬度，但這個只能出現在width,margin,padding，對於border來說卻沒有用。 這種方式一般只能用於寬度的適配，對於高度來說卻沒有什麼用。
  • box-sizing的使用（流佈局裡面常用） 對於box-sizing屬性，這裡要提下，在盒子模型裡面，這個命令了width的屬性。如果設定成border-box，此時的padding表現成一種減的行為，具體的這裡就不多說了。

• 媒體查詢

  • 說到媒體查詢，個人覺得是一個強大的東西，原理是根據當前裝置的寬度與設定的寬度對比，從而判斷要不要載入當前的樣式。當然這種方式使用js,也可以實現，如window.onresize=function(){}。

  • 實現方式：

    • 在css中使用 ，下面的例子是在當前裝置為螢幕裝置且最小寬度為是600px載入上面的css
      如果小於599px則使用 nav li css

      @media screen and (min-width:600px) {
      nav {
      float: left;
      width: 25%;
      }
      section {
      margin-left: 25%;
      }
      }
      @media screen and (max-width:599px) {
      nav li {
      display: inline;
      }
      }

    • 在html中頭部使用:

      <link rel="stylesheet" type="text/css" href="css/iPhone6P.css" media="screen and (min-width: 321px)" 

      這個是一個篩選的樣式處理，如果裝置大於320px，則使用iPhone6P.css的樣式。

• min-width和max-width
  這個屬性是為了對移動的最大和最小的寬度做約束，如果只使用手機，可以設定

  body{
  max-width:640px;
  }

  這樣，無論什麼裝置都不會出現拉伸變形，但是可能在pad和pc瀏覽時會有留白。

svg使用

svg是一種向量格式的圖片，用起來方便，可以任意放大圖形顯示，但絕不會以犧牲影象質量為代價；可在SVG影象中保留可編輯和可搜尋的狀態；平均來講，SVG檔案比JPEG和GIF格式的檔案要小很多，因而下載也很快。

• 使用方法：
  • 當成圖片使用
    如果把svg變成圖片使用，和使用其它的圖片的方法一致
    html <img src="1.svg"/>
  • 轉換成字型使用 svg轉成字型的使用是非常靈活的，可以像字型一樣設定大小和顏色。具體使用網站http://iconfont.cn/進行轉換，然後下載到本地專案檔案裡面，最後再對css進行重寫。

與設計人員對接

與設計人員對接，是專案的必須的環節，也是很重要的環節，我想要注意以下幾個問題：

• 尺寸的轉換
  設計人員面對設計的時候有一個設計尺寸（也就是參考哪個手機尺寸進行設計的）這個關係到以後尺寸的轉換和佈局。如美工如果告訴你我設計參考的比例是iphone5（寬度為320px)，但圖上面標的總尺寸是640px。所以要對後面的高度和寬度都除2.
• 單位的使用
  對於單位使用，如果是寬度的話，我建議使用rem.面如果是字型和svg圖示則使用em為單位。
• 其它
  尊重設計人員和其它人的勞動成果（不要喊設計人員"美工"):)