RWD 系列文章 》
因為裝置的多樣式, RWD 已成為網頁設計的基本技能之一,而 Firefox 與 Chrome 同時提供了 RWD 測試工具。
》Firefox
展開開發者工具面板,按一下板手圖示,開啟相關面板:

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

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

》Chrome
開啟開發人員工具。

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

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

相較於 Firefox ,Chrome 的模擬器無法模擬媒體查詢的斷點切換,只是單純的調整顯示畫面尺寸,用處不大。
RWD 系列文章 》
因為裝置的多樣式, RWD 已成為網頁設計的基本技能之一,而 Firefox 與 Chrome 同時提供了 RWD 測試工具。
》Firefox
展開開發者工具面板,按一下板手圖示,開啟相關面板:
點選適應性設計檢視模式,切換至模擬器。
最上方的數字選單中,列舉了數種常見的數位裝置尺寸,將其展開可以選取所要檢視的尺寸。
》Chrome
開啟開發人員工具。
按一下ESC按鈕,於出現的面板中,按一下Emulation進一步開啟模擬器畫面。
模擬器畫面中,開啟選單其中列舉各種常見的裝置,點選所要測試的裝置,按一下Emulate按鈕,畫面上顯示指定的裝置呈現的網頁外觀。
相較於 Firefox ,Chrome 的模擬器無法模擬媒體查詢的斷點切換,只是單純的調整顯示畫面尺寸,用處不大。
RWD 系列文章 》
1 則留言:
謝了~
我喜歡這篇!!!
F12
Chrome 的模擬器好難用@@
張貼留言