使用手冊 取消

建立媒體查詢

 

 

您可以使用媒體查詢,根據所報告的裝置特性來指定 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)">
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

如需媒體查詢的詳細介紹,請參閱 Don Booth 位於 Adobe 開發人員中心的文章,網址為 www.adobe.com/go/learn_dw_medquery_don_tw

如需 W3C 提供的媒體查詢詳細資訊,請參閱 www.w3.org/TR/css3-mediaqueries/

建立媒體查詢

在 Dreamweaver 中,您可以建立整個網站的媒體查詢檔案,或是文件專用的媒體查詢。

整個網站的媒體查詢檔案

針對包含此檔案的網站,指定當中所有頁面的顯示設定。

整個網站的媒體查詢檔案可做為您網站中所有媒體查詢的中央儲存庫。建立這個檔案之後,請將其連結至您網站中必須使用檔案所包含之媒體查詢顯示的頁面。

文件專用的媒體查詢

媒體查詢會直接插入至文件,而頁面會依照插入的媒體查詢顯示。

  1. 建立網頁。

  2. 選取「修改 > 媒體查詢」。

  3. 請執行下列其中一項作業:

    • 若要建立整個網站的媒體查詢檔案,請選取「整個網站的媒體查詢檔案」。

    • 若要建立文件專用的媒體查詢,請選取「此文件」。

  4. 建立整個網站的媒體查詢,請執行下列動作:

    1. 按一下「指定」。

    2. 選取「建立新的檔案」。

    3. 指定檔案的名稱,然後按一下「確定」。

  5. 部分裝置可能不會報告其實際寬度。若要強制裝置報告其實際寬度,請確定「強制裝置報告實際寬度」選項已啟用。

    當您選擇這個選項時,下列程式碼就會插入您的檔案。

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
  6. 請執行下列其中一項作業:

    • 按一下「+」,以定義媒體查詢檔案的屬性。

    • 如果您想要從標準預設效果著手,請按一下「預設的預設效果」。

  7. 選取表格中的列,然後使用「屬性」下方的選項來編輯其屬性。

    描述

    CSS 檔案必須使用的裝置描述。例如,手機、電視、平板電腦等。

    最小寬度與最大寬度

    CSS 檔案會用於所報告寬度介於指定值之間的裝置。

    註解:

    如果您不想要為裝置指定明確的範圍,請將「最小寬度」或「最大寬度」保持空白。舉例來說,如果您的目標是寬度為 320 像素或更低的手機,通常可以將「最小寬度」保持空白。

    CSS 檔案

    針對每個裝置選取「使用現有的檔案」,或瀏覽至裝置的 CSS 檔案。

    如果您想要指定尚未建立的 CSS 檔案,請選取「建立新的檔案」。輸入 CSS 檔案的名稱。當您按下「確定」時,就會建立檔案。

  8. 按一下「確定」。

  9. 隨即為整個網站的媒體查詢建立新的檔案。加以儲存。

整個網站的媒體查詢:針對現有頁面,請確定您已將媒體查詢檔案包含在所有頁面的 <head> 標籤中。

在下方的媒體查詢連結範例中,mediaquery_adobedotcom.css 為 site www.adobe.com/tw/ 之整個網站的媒體查詢檔案:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

使用現有的媒體查詢檔案

  1. 建立網頁,或開啟現有頁面。

  2. 選取「修改 > 媒體查詢」。

  3. 選取「整個網站的媒體查詢檔案」。

  4. 按一下「指定」。

  5. 如果您已建立具有媒體查詢的 CSS 檔案,請選取「使用現有的檔案」。

  6. 按一下瀏覽圖示以瀏覽並指定檔案。按一下「確定」。

  7. 選取「整個網站的媒體查詢檔案」。

  8. 若要強制裝置報告其實際寬度,請確定「強制裝置報告實際寬度」選項已啟用。當您選擇這個選項時,下列程式碼就會插入您的檔案。

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width">
  9. 按一下「確定」。

選取不同的整個網站的媒體查詢檔案

使用這個程序,即可變更您已在「媒體查詢」對話框中設定之整個網站的媒體查詢檔案。

  1. 選取「網站 > 管理網站」。

  2. 在「管理網站」對話框中,選取您的網站。

  3. 按一下「編輯」。「網站設定」對話框隨即出現。

  4. 在左側面板的「進階設定」下方,選取「本機資訊」。

  5. 在右側面板的「整個網站的媒體查詢檔案」中,按一下「瀏覽」以選取媒體查詢 CSS 檔案。

    註解:

    變更整個網站的媒體查詢檔案並不會影響已連結至不同或先前整個網站的媒體查詢檔案之文件。

  6. 按一下「儲存」。

根據媒體查詢檢視網頁

媒體查詢指定的尺寸會顯示在多螢幕按鈕/視窗大小的選項中。當您從功能表中選取尺寸時,就可以看到下列變更:

  • 檢視大小會變更以反映指定的尺寸。文件頁框大小會保持不變。

  • 媒體查詢中指定的 CSS 檔案會用來顯示頁面。

更快、更輕鬆地獲得協助

新的使用者?