瀏覽器 軟體

[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬RWD在各種裝置下的網頁畫面

2019/06/20

梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一次預覽網頁在各種裝置下的畫面
  隨著現在行動裝置的尺寸愈來愈多元,這也考驗著網頁設計師的功力,要如何讓網頁皆能在各種不同的裝置下正常的顯示,因此網頁設計完畢後,在上線時一定得先進行測試才能確保,網頁能在各種不同的裝置下運作,但現在的裝置實在太多,總不可能全部買齊。

  因此這時候,可透過Emmet Re:view 這隻Chrome外掛套件,一鍵就可讓網頁,模擬各種裝置下的顯示結果,如此一來就可確保網頁能因應各種裝置,至於Emmet Re:view 要如何使用,現在就一塊來看看吧!


Emmet Re:view
外掛名稱:Emmet Re:view
外掛下載:Chrome商店

Step1
首先,進到Emmet Re:view的外掛頁面後,點一下「加到Chrome」鈕,再點「新增擴充功能」鈕。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step2
當安裝完畢後,在網址列後方,會看到Emmet Re:view的小圖示。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step3
當要使用時,只需開啟網頁後,再點一下「Emmet Re:view」圖示,隨即便會進入Emmet Re:view的模擬畫面面板。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step4
接著點一下「Device Wall」, 隨即網頁就會套用各種iPhone裝置下的畫面,同時在每個畫面下還會顯示裝置名稱與解析度。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step5
再一下裝置的下拉選單中,還可選擇裝置的類型,預設是iPhone,也可切換成iPad或一般的平板。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step6
甚至也可自訂裝置,比方建立一個三星的裝置,再把要測試的裝置型勾選。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step7
當設定完畢後,以後只要點一下,立即就會將網頁,套用剛所設定的裝置群組下。
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step8
當然也可點Devices下的裝置,而在這清單中,一次只會顯示一個畫面,因此透過這隻外掛,就可快速的檢測出,自行所設計的RWD網頁,是否皆能在各裝置中正常的顯示喔!
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面
Step9
說明
梅問題-[外掛] Emmet Re:view 響應式網頁必備檢測外掛,一鍵模擬網頁在各種裝置下的畫面