響應式布局測試工具，比Chrome自帶的擴展更好用

Sponsor

現在智能手機和平板不斷更新，分辨率也隨著增多，導致測試響應式的網頁布局越來越困難，如果用Chrome瀏覽器自帶的擴展程序來測試，每檢測一個分辨率就要去選擇一次，10個設備就要選擇10次，這樣來回是很麻煩的操作，所以今天設計達人分享大家一個免費好用的響應式布局測試工具，也是Chrome的擴展程序：Responsive Viewer，它的最大特色就是一個窗口同時測試多個設備分辨率，簡單卻能釋放前端人員雙手。

使用教程&介紹

響應式布局測試工具很多，但像Responsive Viewer的一窗多預覽的模式卻很少，有一個功能強大的sizzy擴展也有類似功能，但需要$60美元/年的費用。所以Responsive Viewer是良心之作。

使用方法：

1. 打開要測試的網址

2. 點擊Responsive Viewer擴展圖標（當安裝好擴展后，瀏覽器菜單欄會多出擴展的圖標）

下面拿設計達人網站來測試，我們點擊圖標后，就看到這一個預覽窗口，我們看到的多組頁面就是不同設備的分辨率，有手機、平板以及PC大屏幕，也可以自己自定義分辨率，支持本地和外網測試。

添加自定義分辨率：

點擊右上角的加號，就會看到一個彈窗，手動輸入寬高即可

同步滾動模式：

GIF圖演示：

同步點擊功能：

在同步滾動旁邊有個像鼠標一樣的圖標，就是同步點擊功能，選中它之后，就能每個屏幕同點被點擊了。

該擴展還有其它功能，比如設備分辨率的增減、排序、垂直展示等等，這里不一一介紹，還是趕快下載體驗或備用！

獨立的開發者模式：

每個窗體都是獨立的，可以單獨使用「開發者模式」來調整。如果需要一次性刷新就需要點刷新按鈕了，但這個需要設置本地的CSS樣式表或JS庫。

安裝方法

方法一：直接在Chrome商店安裝（推薦）

方法二：用壓縮包版安裝（下載地址在下面）

壓縮包安裝流程：

1、在Chrome瀏覽器地址輸入chrome://extensions/

2、啟用「開發者模式」

3、點擊「加載已解壓的擴展程序」，然后選擇剛剛下載的壓縮并解壓出來的文件夾即可。

小編測試安裝包安裝時，會顯示有個「錯誤」的東西出來，但沒有影響使用，所以也沒有理會了。

下載擴展

工具名稱：響應式布局預覽工具（Responsive Viewer）

Chrome商店安裝：https://chrome.google.com/webstore/detail/responsiveviewer/inmopeiepgfljkpkidclfgbgbmfcennb

壓縮包安裝版本：https://pan.baidu.com/s/1rBBROzKOhvEXeyh_R7XYow?提取碼: 59ev

該擴展今年年底才上線，已累計1萬多人下載使用，使用量這么多的話，開發者應該會繼續開發更多新的功能上去，我們一起期待。

這么好用的響應式布局測試工具，快分享給你身邊的設計師和開發同事吧！

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。