< Return to Video

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

Chinese, Traditional subtitles

Revisions