使用「視覺媒體查詢」在對應至不同螢幕大小的不同中斷點上檢視並編輯網頁。

媒體查詢是一種 CSS3 模組,可藉由定義不同樣式規則以供不同的裝置或媒體類型使用,幫助您設計多方互動的網站。根據這些規則,內容的呈現會配合各種不同的條件,例如螢幕大小、瀏覽器視窗大小、裝置大小和方向及解析度。

您可以將使用 @media 規則的媒體查詢新增至您的 CSS。或者,您也可以針對不同的媒體類型建立不同的樣式表,然後使用下列語法加以呼叫:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

裝置中的瀏覽器會檢查媒體查詢,並使用對應的 CSS 檔案來顯示網頁。

如需詳細資訊,請參閱本文

您可以藉由在 HTML 或 CSS 檔案中加入相關程式碼的方式來新增媒體查詢。此外,Dreamweaver 可讓您使用以下項目來輕鬆建立及管理媒體查詢:

這兩種方法的基本差異在於視覺方面。如果您偏好編寫程式碼然後在即時檢視中查看變更,請使用 CSS 設計工具。如果您偏好在不同的中斷點將頁面視覺化,並同時進行設計變更,則視覺媒體查詢是較好的選擇。

視覺媒體查詢列

「視覺媒體查詢」列是存在於頁面中之媒體查詢的視覺化表示。這些查詢列可幫助您在不同的中斷點將網頁視覺化,並幫助您以視覺化方式呈現網頁的不同元件如何在不同的檢視區中重排。當您在不同檢視區中檢視您的頁面時,您可以對某個檢視區進行特有的設計變更,而不會影響其他檢視區中的頁面設計。

視覺媒體查詢是由三個查詢列 (水平列) 所組成,每一列都代表媒體查詢的一個類別:

  • 綠色:具有 max-width 條件的媒體查詢
  • 藍色:具有 min-width 和 max-width 條件的媒體查詢
  • 紫色:具有 min-width 條件的媒體查詢

註解:

列在 CSS 設計工具面板中的媒體查詢也會前置這些顏色。

每個類別都由一個或多個媒體查詢所組成。如果文件中並未定義媒體查詢條件,則也將不會顯示對應的視覺媒體查詢列。例如,如果文件並未包含 min-width 條件,便不會顯示紫色列。

列上會指示中斷點值 - 列的左邊是 min-width,而右邊是 max-width。

中斷點值
中斷點值

A. 中斷點 B. 視覺媒體查詢列 C. 新增媒體查詢圖示 D. Scrubber 

隱藏或顯示視覺媒體查詢

視覺媒體查詢列預設可以在即時檢視中看到。若要隱藏此列,請使用工具列中的「切換視覺媒體查詢列」。

在中斷點之間切換

若要以特定大小 (中斷點) 檢視您的頁面,請按一下對應的媒體查詢列。文件將會貼齊中斷點。

或者,您也可以將 Scrubber 拖曳到所要的中斷點。

若要將視圖調整為 Dreamweaver 文件視窗的大小,請執行下列其中一個動作:

  • 在您看到「按兩下以符合寬度」文字所在文件的右邊之灰色區域內的任何地方按兩下。如果您沒有看到灰色區域,請將 Scrubber 向左拖曳。
  • 在文件視窗底部的下拉式清單中選取「完整寬度」選項。
調整視圖大小
調整視圖大小

如果您未看到這個選項,請拖曳 Scrubber 來縮小網頁。

以視覺方式編輯媒體查詢

  1. 按一下對應到您想要編輯之媒體查詢的視覺媒體查詢列。

    隨即出現「更改大小控制點」。對於擁有 minmax-width 值的媒體查詢,「更改大小控制點」會出現在此查詢列的兩側。

    更改大小控制點
    更改大小控制點

  2. 將控制點拖曳到所要的大小。

    媒體查詢會自動更新為新的 min-width 和/或 max-width 值。畫面上會顯示一則通知,指出此媒體查詢已順利編輯。如果有多個媒體查詢對應到視覺媒體查詢列,則所有的媒體查詢都會更新。畫面上會顯示已更新的媒體查詢數目,連同成功訊息。

註解:

若要還原,請按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。

或者,您可以按兩下中斷點的值,使用鍵盤輸入值。

新增媒體查詢

  1. 沿著尺規將 Scrubber 拖曳到所要的大小。

  2. 按一下 

    新增媒體查詢
    新增媒體查詢

  3. 在出現的彈出式選單中,預設會選取 max-width 選項。若要指定 min-width 或 min-max,請在下拉式清單中選取適當的選項並選取所需的單位。

    然後,選取必須加入媒體查詢的 CSS 來源。

    如果您選擇建立新的 CSS 檔案,則會出現另一個彈出式選單。指定新的 CSS 檔案的名稱和路徑,然後按一下「確定」。

註解:

若要還原,請按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。

刪除媒體查詢

  1. 以滑鼠右鍵按一下對應的視覺媒體查詢列。

  2. 按一下「刪除」,然後按一下您想要刪除的媒體查詢。

  3. 按一下「確定」,確認您想要刪除所有的媒體查詢和關聯的選取器。

註解:

若要還原,請按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。

檢視媒體查詢的程式碼

  1. 以滑鼠右鍵按一下所要的視覺媒體查詢列,並將滑鼠停留在「前往程式碼」上方。

    隨即出現一份清單,其中包含該特定中斷點範圍內的所有媒體查詢以及宣告這些查詢的檔案。

  2. 按一下所要的媒體查詢,即可在「程式碼檢視」中導覽至對應的程式碼。

    如果未顯示「程式碼檢視」,則表示文件已切換至「分割」檢視來顯示程式碼。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策