【公告】網站目前停止所有的課程訂閱服務,除了 7 月底預計完成上線的 KBF 餘下課程影片,將不會再新增其它課程內容,原有學員權益不受影響,造成不便還請見諒,我們正在開發以 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供更好的課程訂閱服務,感謝學員的支持。

Firefox 與 Chrome 的 RWD 測試工具

RWD 系列文章 》

因為裝置的多樣式, RWD 已成為網頁設計的基本技能之一,而 Firefox 與 Chrome 同時提供了 RWD 測試工具。

》Firefox

展開開發者工具面板,按一下板手圖示,開啟相關面板:



點選適應性設計檢視模式,切換至模擬器。



最上方的數字選單中,列舉了數種常見的數位裝置尺寸,將其展開可以選取所要檢視的尺寸。



》Chrome

開啟開發人員工具。



按一下ESC按鈕,於出現的面板中,按一下Emulation進一步開啟模擬器畫面。



模擬器畫面中,開啟選單其中列舉各種常見的裝置,點選所要測試的裝置,按一下Emulate按鈕,畫面上顯示指定的裝置呈現的網頁外觀。



相較於 Firefox ,Chrome 的模擬器無法模擬媒體查詢的斷點切換,只是單純的調整顯示畫面尺寸,用處不大。

RWD 系列文章 》



1 則留言:

天秤女佳佳 提到...

謝了~
我喜歡這篇!!!

F12
Chrome 的模擬器好難用@@