按一下對應至您要編輯的媒體查詢的視覺媒體查詢列。
上次更新時間
2021年12月20日
使用「視覺媒體查詢」在對應至不同螢幕大小的不同中斷點上檢視並編輯網頁。
媒體查詢是一種 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 檔案顯示網頁。
如需詳細資訊，請參閱本文。
視覺媒體查詢列
「視覺媒體查詢」列是存在於頁面中之媒體查詢的視覺化表示。 這些查詢列可幫助您在不同的中斷點將網頁視覺化，並幫助您以視覺化方式呈現網頁的不同元件如何在不同的檢視區中重排。 當您在不同檢視區中檢視您的頁面時，您可以對某個檢視區進行特定的設計變更，而不會影響其他檢視區中的頁面設計。
視覺媒體查詢是由三個查詢列 (水平列) 所組成，每一列都代表媒體查詢的一個類別：
綠色：具有 max-width 條件的媒體查詢
藍色 ：具有 min-width 和 max-width 條件的媒體查詢
紫色 ：具有 min-width 條件的媒體查詢
CSS 設計工具面板中列出的媒體查詢也會使用這些色彩作為前置詞。
每個類別都由一個或多個媒體查詢所組成。 如果文件中並未定義媒體查詢條件，則也將不會顯示對應的視覺媒體查詢列。 例如，如果文件不含 min-width 條件，則不會顯示紫色列。
中斷點值會顯示在列上，min-width 位於列的左側，max-width 位於列的右側。
A. 中斷點 B. 視覺媒體查詢列 C. 新增媒體查詢圖示 D. Scrubber
隱藏或顯示視覺媒體查詢
視覺媒體查詢列預設可以在即時檢視中看到。 若要隱藏該列，請使用工具列中的「切換視覺媒體查詢列」。
在中斷點之間切換
若要以特定大小 (中斷點) 檢視您的頁面，請按一下對應的媒體查詢列。 文件會貼齊至中斷點。
或者，您可以拖曳滑桿到所需的中斷點。
若要將檢視調整為 Dreamweaver 文件視窗的大小，請執行以下動作之一：
- 在您看到「按兩下以符合寬度」文字所在文件的右邊之灰色區域內的任何地方按兩下。 如果您沒有看到灰色區域，請將滑桿向左拖曳。
- 在文件視窗底部的下拉式清單中選取「全寬」選項。
如果您沒有看到此選項，請拖曳滑桿以縮小網頁的大小。
以視覺方式編輯媒體查詢
隨即出現「更改大小控制點」。 對於同時具有 min 和 max-width 值的媒體查詢，調整大小控點會出現在橫條的兩側。
將控點拖曳至所需的大小。
媒體查詢會自動更新為新的 min-width 和/或 max-width 值。 畫面上會顯示一則通知，指出此媒體查詢已順利編輯。 如果有多個媒體查詢對應到視覺媒體查詢列，則所有的媒體查詢都會更新。 更新的媒體問題數量會與成功訊息一起顯示。
若要復原，請按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。
或者，您也可以按兩下中斷點值，以使用鍵盤輸入值。
新增媒體查詢
將滑動軸沿著尺規拖曳至所需大小。
按一下 
。
在出現的彈出式選單中，預設會選取 max-width 選項。 若要指定 min-width 或 min-max，請在下拉清單中選取適當選項，然後選取所需的單位。
然後，選取必須新增媒體查詢的 CSS 來源。
如果您選擇建立新的 CSS 檔案，則會出現另一個彈出式選單。 指定新 CSS 檔案的名稱和路徑，然後按一下「確定」。
若要復原，請按 Ctrl+Z (Win) 或 Cmd+Z (Mac)。
刪除媒體查詢
在對應的視覺媒體查詢列上按一下滑鼠右鍵。
按一下「刪除」，然後按一下您要刪除的媒體查詢。
按一下「確定」以確認您要刪除所有媒體查詢和相關的選取器。
若要復原，請按一下 Ctrl+Z (Win) 或 Cmd+Z (Mac)。
檢視媒體查詢的代碼
在所需的視覺媒體查詢列上按一下滑鼠右鍵，並將滑鼠游標移至「前往代碼」。
該特定中斷點範圍內的所有媒體查詢清單以及宣告這些查詢的檔案會出現。
按一下所需的媒體查詢，以導覽至「程式碼檢視」中的對應程式碼。
如果「代碼」檢視不可見，文件會切換至「分割」檢視以顯示代碼。
