回應式版面配置總覽

AMP HTML 廣告不支援回應式功能。影片廣告GIF 動畫圖像廣告可以使用多種尺寸的版面配置。

回應式設計採用靈活的版面配置,可根據不同的螢幕可視區域方向或大小自行調整,讓您無須建立多個版面配置。Google Web Designer 提供了多種工具,可協助您打造採用回應式設計的作品。

請注意,文件不得小於回應式頁面尺寸。您也可以使用百分比設定物件大小和位置,藉此建立浮動版面配置。如要根據不同的可視區域大小或大小範圍分別自訂元素,請使用媒體規則。

圖像廣告無法設為回應式廣告,但可以透過多種尺寸版面配置中的回應式工作流程,從單一文件中匯出不同尺寸。

回應式頁面尺寸

將整份文件設為回應式文件

回應式文件的頁面寬度和高度應設為 100%,才能將螢幕上的所有可用空間填滿。

  • 現有文件:在「回應式」面板中,勾選 [回應式版面配置] 核取方塊。

  • 新檔案:在新檔案的對話方塊中指定尺寸時,選取 [回應式版面配置] 核取方塊 (部分檔案類型無法使用這個選項)。

如要讓網頁上的內容擁有回應式效果,則可採用浮動版面配置和媒體規則。

浮動版面配置

以百分比設定大小和位置

百分比編寫總覽

除了頁面尺寸以外,您也可以使用百分比 (而非像素) 來指定元素的大小和位置。這樣一來,即使父項容器改變,元素也會因為採用百分比設定而維持與父項容器的相對大小和對齊方式。

對齊元素時,使用對齊和相等間距工具中的浮動版面配置選項,即可輕鬆以百分比設定位置。

媒體規則

針對不同的方向和大小覆寫屬性和 CSS 樣式

媒體規則可讓文件偵測可視區域的大小和方向,並據此套用不同樣式和屬性。舉例來說,手機可能會以單欄呈現某個內容,而平板電腦則可以兩欄顯示相同的內容。系統會根據指定的大小或大小範圍進行上述改變 (也就是覆寫)。

您可以在回應式面板中切換不同的規則組合:

  • 預設規則:如要變更預設樣式組合,或進行要為所有可視區域大小套用的變更 (例如新增或刪除素材資源、元件或事件),請選取 [編輯基礎文件]
  • 媒體規則:選取特定大小或大小範圍,藉此覆寫該可視區域大小的預設樣式和屬性。

選取一項媒體規則後,您就可以設定只會套用到該大小或大小範圍的樣式和屬性。舉例來說,您可以調整元素的位置、大小、來源、顯示設定或動畫。Google Web Designer 還可讓您覆寫文字內容、文字合框設定及元件屬性。

進一步瞭解媒體規則和覆寫

這對您有幫助嗎?

我們應如何改進呢?
搜尋
清除搜尋內容
關閉搜尋
主選單
15722276470528858658
true
搜尋說明中心
true
true
true
true
true
5050422
false
false