Chrome中的Device模組調式響應性設計
閱讀目錄
啟用Device模組
點選chrome瀏覽器右鍵 ---》 審查元素 --》 點選Toggle device Mode圖示按鈕即可開啟Device模組，如下所示：
開啟後如下介面；
如上網頁是在網上找的一個響應性的簡單網站 http://www.zuixiandao.cn/index.html
Device模組設定介紹
開關螢幕解析度可以勾選如下核取方塊：
比如正常的頁面如下：
勾選後的頁面如下：
我們勾選後還可以自定義寬度和高度如下手動設定：
切換橫屏還是豎屏可以點選如下按鈕：
我們在上面還可以模擬裝置，點選出現下拉框，如下：
我們還可以模擬網路情況，比如2G，3G，4G網路的情況下；
自定義預設介紹：
點選瀏覽器檢視右上角的More overrides圖示，開啟如下介面：
我們可以點選左側的Device選單項後，選擇右邊的Model下拉框，可以模擬裝置。這個 emulation 皮膚的功能與 上面介紹的device 模組介面上基本一致.
如下所示：
我們可以勾選Emulate screen resolution核取方塊，在輸入框內設定螢幕寬度和高度來檢視頁面顯示情況；如下：
Emulate mobile核取方塊勾選是 模仿移動裝置顯示；如下勾選：
不勾選此核取方塊，如下顯示：
我們還可以在Network選項卡中，模擬網路情況，因為移動端使用者，在網路變化情況下，優化網站效能是很關鍵的。如下下拉框（和device介面一樣的下拉框），如下所示：
檢視media queries
DevTools 會檢測你樣式表裡面的 Media Queries 程式碼並且在上面標尺中用不同顏色條顯示出來。
Media Queries 的顏色定義遵循下載面規則：
（藍色）查詢一個最大寬度
（綠色）查詢某一個範圍內的寬度
（橙色）查詢一個最小寬度
右鍵工具欄可以檢視這條Media Query是哪裡定義的，並且可以跳轉到對應的原始碼的位置，如下所示：
點選後，開啟css介面；如下所示：
上面我們談到，綠色代表的是某一個範圍的寬度；同理，藍色的含義是查詢一個最大的寬度，登色代表是一個最小寬度。
提示：當我們使用 Media Query 檢視器的時候，你可能並不需要每次都使用手機模擬器。不退出 device 模組而關掉手機模擬器，你可以點選如下介面的按鈕：
模擬觸發觸控事件
觸控式螢幕模擬移動端觸控事件（比如有touchstart，touchmove和touchend事件）等。比如模擬touchstart事件，我們使用滑鼠點選一下對應的元素即可，比如模擬touchmove事件，我們只要點選元素，不放手拖動就會觸發事件；
在感測器皮膚勾選 Emulate touch screen核取方塊即可使用，如下所示：
啟用後，當你把滑鼠放在模擬器檢視的時候，手機圖示會變成一個指尖大小的圓圈，同時觸控事件（諸如 touchstart，touchmove，和 touchend）會像在手機裝置上那樣被觸發。
為了做一個demo來演示下效果，我們可以檢視 http://www.zuixiandao.cn/index.html 網站的js，可以在請求裡面找到一個index.js, 我們把此程式碼複製一份存到本地，用fiddler代理一下替換線上的index.js檔案後，找到頁面上的id元素，然後對id元素監聽touchstart事件和touchmove事件即可來演示下，比如我找到頁面中最底部的 分享到微博按鈕 有一個id，我們只需要對這個id來監聽touchstart和touchmove事件即可；如下程式碼：
var down = document.getElementById("sina");
down.addEventListener('touchmove',function(){
alert(1);
});
然後儲存後，重新整理對應的頁面，在電腦上點選一下就相當於在移動端觸控下效果一樣，我們可以看到彈出對話方塊1了；同理touchmove事件也一樣，我們只需要點選元素後，按住滑鼠不動拖動就可以觸發事件；