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事件也一樣，我們只需要點擊元素后，按住鼠標不動拖動就可以觸發事件；