Responsive Design View
-
0:03 - 0:05適應性設計檢視可以簡單地預覽
-
0:05 - 0:08你的網站或 WebApp 在各種裝置上的外觀和行為
-
0:08 - 0:11例如小螢幕的手機
-
0:11 - 0:15當然你可以直接調整瀏覽器視窗的大小
-
0:15 - 0:17但是這會有兩個問題
-
0:18 - 0:21首先,它很難精確設定可視區域的大小尺寸
-
0:21 - 0:24第二,當你讓桌面瀏覽器介面太小
-
0:24 - 0:27會變得非常難以使用
-
0:27 - 0:31有了適應性設計檢視,你可以輕易且準確的
-
0:31 - 0:34設定網站可視區域的大小
-
0:34 - 0:38同時瀏覽器視窗仍維持在原本的大小
-
0:40 - 0:42因為,瀏覽器視窗大小是不變的
-
0:42 - 0:45當你工作時,你可以很容易地切換到其他頁籤
-
0:48 - 0:52可視區域預設為 320x480 像素
-
0:53 - 0:56你可以選擇其他一些預設值
-
0:56 - 1:00並客製你需要的大小尺寸
-
1:01 - 1:03你可以旋轉螢幕
-
1:04 - 1:08也可以藉著拖曳邊框改變大小
-
1:10 - 1:14當然你可以同時使用其他的開發者工具進行偵錯
-
1:14 - 1:18如果你的網頁還有地方需要調整的話
-
1:19 - 1:23這是一個非常簡短的適應性設計檢視介紹
-
1:23 - 1:26若想獲得更多 Firefox 開發者工具的相關資訊
-
1:26 - 1:30快上 developer.mozilla.org 看看吧!
- Title:
- Responsive Design View
- Video Language:
- English
- Duration:
- 01:32
![]() |
Eddie Lin edited Chinese, Traditional subtitles for Responsive Design View | |
![]() |
Eddie Lin edited Chinese, Traditional subtitles for Responsive Design View | |
![]() |
NCTU0216008 edited Chinese, Traditional subtitles for Responsive Design View |