【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 4 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

Firefox 與 Chrome 的 RWD 測試工具

RWD 系列文章 》

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

》Firefox

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



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



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



》Chrome

開啟開發人員工具。



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



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



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

RWD 系列文章 》



1 則留言:

天秤女佳佳 提到...

謝了~
我喜歡這篇!!!

F12
Chrome 的模擬器好難用@@