## 首先我們應該遵循移動優先原則： 交互和設計應以移動端為主，PC則作為移動端的一個擴展； 一個頁面需要兼容不同終端，那么有兩個關鍵點是我們需要去做到響應式的：響應式布局和響應式內容（圖片、多媒體）。 ### **一、響應式布局** **1、Meta標簽定義** 使用 viewport meta 標簽在手機瀏覽器上控制布局 ``` <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> ``` 通過快捷方式打開時全屏顯示 ``` <meta name="apple-mobile-web-app-capable" content="yes"> ``` 隱藏狀態欄 ``` <meta name="apple-mobile-web-app-status-bar-style" content="blank"> ``` iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉 ``` <meta name="format-detection" content="telephone=no"> ``` **2、使用Media Queries適配對應樣式** 常用于布局的CSS Media Queries有以下幾種： **設備類型(media type):** all所有設備； 　　screen 電腦顯示器； 　　print打印用紙或打印預覽視圖； 　　handheld便攜設備； 　　tv電視機類型的設備； 　　speech語意和音頻盒成器； 　　braille盲人用點字法觸覺回饋設備； 　　embossed盲文打印機； 　　projection各種投影設備； 　　tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。 **設備特性(media feature):** width瀏覽器寬度； height瀏覽器高度； device-width設備屏幕分辨率的寬度值； device-height設備屏幕分辨率的高度值； orientation瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape； aspect-ratio比例值，瀏覽器的縱橫比； device-aspect-ratio比例值，屏幕的縱橫比。 ``` /* for 240 px width screen */ 　　@media only screen and (max-device-width:240px){ 　　?selector{ ... } 　　} 　　/* for 320px width screen */ 　　@media only screen and (min-device-width:241px) and (max-device-width:320px){ 　　?selector{ ... } 　　} 　　/* for 480 px width screen */ 　　@media only screen (min-device-width:321px)and (max-device-width:480px){ ?　　selector{ ... } 　　} ``` **3、表格(table)的響應式處理** 那么對于表格(table)的響應式處理該是怎樣的呢？我們該如何突破Table的局限性呢？接下來我們來了解以下的幾種針對表格響應式處理的方法： **（1）、隱藏不重要數據列** ``` @media only screen and (max-width: 800px) { ?　　table td:nth-child(2), ?　　table th:nth-child(2) {display: none;} 　　} 　　@media only screen and (max-width: 640px) { ?　　table td:nth-child(4), 　　?table th:nth-child(4), ?　　table td:nth-child(7), 　　?table th:nth-child(7), ?　　table td:nth-child(8), 　　?th:nth-child(8){display: none;} 　　} ``` **（2）、多列橫向變2列縱向** 實現方法：定位隱藏，變塊元素，并綁定對應列名，然后用偽元素的content:attr(data-th)實現： **（3）、固定首列，剩余列橫向滾動** ``` thead {float:left;} 　tbody {display:block;width:auto;overflow-x:auto;} ``` ### **二、響應式內容** **1、響應式圖片** 帶寬是手機終端的硬傷，如果我們只是頁面布局做了響應式處理，在我們用手機訪問時，請求的圖片還是PC上的大圖；文件體積大，消耗流量多，請求延時長，因此導致的問題也是不可估量的。那么我們就得把圖片也處理成響應式的根據終端類型尺寸分辨率來適配出合理的圖形。 處理原理：瀏覽器獲取用戶終端的屏幕尺寸、分辨率邏輯處理后輸出適應的圖片，如屏幕分辨率320\*480，那么我們匹配給它的是寬度應小于320px的圖片。如果終端屏幕的DPI(device pixels)DPI詳解值很高，也就是高清屏，那么我們就得輸出2倍分辨率的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的屏幕參數可通過[http://screensiz.es/phone](http://screensiz.es/phone)查詢。 **2、高分辨率(DPI)下的響應式處理** **3、高分辨率下的1px border**