建立網頁。
上次更新時間
2021年4月27日
您可以使用媒體查詢，根據所報告的裝置特性來指定 CSS 檔案 (互動設計)。 裝置中的瀏覽器會檢查媒體查詢，並使用對應的 CSS 檔案顯示網頁。
舉例來說，下列媒體查詢會為寬度為 300 至 320 像素的裝置指定 phone.css 檔案。
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
如需媒體查詢的詳細介紹，請參閱 Don Booth 在 Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en上的文章。
如需 W3C 提供之媒體查詢的詳細資訊，請參閱 www.w3.org/TR/css3-mediaqueries/。
建立媒體查詢
在 Dreamweaver 中，您可以建立整個網站的媒體查詢檔案，或特定文件的媒體查詢。
全網站媒體查詢檔案
為您網站中包含該檔案的所有頁面指定顯示設定。
全網站媒體查詢檔案可做為您網站中所有媒體查詢的中央存放庫。建立此檔案後，請在您網站中需要使用該檔案內媒體查詢進行顯示的頁面中連結至此檔案。
文件專用媒體查詢
媒體查詢會直接插入至文件中，並依據插入的媒體查詢顯示頁面。
選取「修改 > 媒體查詢」。
請執行下列其中一項作業：
若要建立全網站媒體查詢檔案，請選擇「全網站媒體查詢檔案」。
若要建立文件專用的媒體查詢，請選取「此文件」。
建立整個網站的媒體查詢，請執行下列動作：
按一下「指定」。
選取「建立新的檔案」。
指定檔案的名稱，然後按一下「確定」。
某些裝置可能不會報告其實際寬度。若要強制裝置報告其實際寬度，請確保已啟用「強制裝置報告實際寬度」選項。
當您選擇此選項時，會將下列程式碼插入至您的檔案中。
<meta name="viewport" content="width=device-width">
執行下列其中一項作業：
按一下「+」以定義媒體查詢檔案的屬性。
如果您想要從標準預設值開始，請按一下「預設預設值」。
選擇表格中的列，並使用「屬性」下方的選項來編輯其屬性。
描述
必須使用 CSS 檔案之裝置的說明。例如，手機、電視、平板電腦等。
最小寬度與最大寬度
CSS 檔案會用於所報告寬度介於指定值之間的裝置。
備註
如果您不想要為裝置指定明確的範圍，請將「最小寬度」或「最大寬度」保持空白。 舉例來說，如果您的目標是寬度為 320 像素或更低的手機，通常可以將「最小寬度」保持空白。
CSS 檔案
選擇「使用現有檔案」，並瀏覽至該裝置的 CSS 檔案。
如果您想要指定尚未建立的 CSS 檔案，請選擇「建立新檔案」。輸入 CSS 檔案的名稱。當您按下「確定」時，就會建立檔案。
按一下「確定」。
隨即為整個網站的媒體查詢建立新的檔案。 加以儲存。
全網站媒體查詢：對於現有頁面，請確保您在所有頁面的 <head> 標記中包含媒體查詢檔案。
媒體查詢連結的範例，其中 mediaquery_adobedotcom.css 是地點 www.adobe.com: 的全地點媒體查詢檔案
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
使用現有的媒體查詢檔案
建立網頁，或開啟現有頁面。
選取「修改 > 媒體查詢」。
選取「整個網站的媒體查詢檔案」。
按一下「指定」。
如果您已經建立包含媒體查詢的 CSS 檔案，請選取「使用現有檔案」。
按一下瀏覽圖示以瀏覽並指定檔案。 按一下「確定」。
選取「整個網站的媒體查詢檔案」。
若要強制裝置回報其實際寬度，請確定 已啟用「強制裝置回報實際寬度」選項。選擇此選項時，會將下列 代碼插入您的檔案中。
<meta name="viewport" content="width=device-width">
按一下「確定」。
選擇其他全站媒體查詢檔案
使用此程序來變更您在「媒體查詢」對話框中設定的全站媒體查詢檔案。
選取「網站 > 管理網站」。
在「管理網站」對話方塊中，選取您的網站。
按一下「編輯」。 「網站設定」對話方塊隨即出現。
在左側面板的「進階設定」下方，選取「本機資訊」。
在右側面板的「全網站媒體查詢檔案」中，按一下「瀏覽」以選取媒體查詢 CSS 檔案。
備註
變更全站媒體查詢檔案不會影響連結至其他或先前全站媒體查詢檔案的文件。
按一下「儲存」。
根據媒體查詢檢視網頁
媒體查詢中指定的尺寸會出現在多螢幕按鈕/視窗大小的選項中。從選單選取 Dimension 時，會看到下列變更：
檢視大小會變更以反映指定的尺寸。 文件頁框大小會保持不變。
媒體查詢中指定的 CSS 檔案會用於顯示頁面。
