中斷點概觀

中斷點是對應於不同裝置 (例如桌上型電腦、平板電腦和行動裝置) 寬度的像素範圍。 當設備的寬度在斷點預定義的像素範圍內時，網站的佈局將進行調整，以便針對該設備的尺寸和方向優化內容和設計。例如，如果我在台式計算機上查看網站，則可以查看完整的站點菜單，但是當我在移動設備上查看該網站時，我會看到一個漢堡菜單。

彈性 中斷點

Flex 的主要斷點是桌面。 如果您對桌面中斷點進行設計或內容變更，這些變更會自動套用至寬型桌上型電腦、平板電腦和行動裝置的其他中斷點。 如果您變更內容 (例如新增 Widget、取代影像或編輯文字)，則變更會自動套用至所有其他中斷點，而不論變更在哪個中斷點上進行變更。

但是，如果您在特定中斷點上變更元素的位置或大小，則變更將不會套用至其他中斷點。 例如，如果您變更行動中斷點上元素的大小，變更只會套用至行動裝置和行動橫向中斷點，而不會套用其他中斷點。

在 Flex 中，預設中斷點為：

• 桌上型電腦 (1025 像素)

• 寬桌面（1400 像素及以上）

• 平板電腦 (768 像素)

• 移動（767 像素及以下）

• 移動橫向（468 像素 -767 像素）

您可以按一下不同的檢視，在頁面頂端的中斷點之間切換。

結構變化

對任何中斷點所做的結構變更會影響所有其他中斷點。 當您位於主要中斷點 (桌面) 以外的中斷點，並進行結構性變更時，會顯示警告訊息，通知您變更會影響所有中斷點。 結構變更包括內容或版面配置變更，例如新增或刪除區段、欄、彈性方塊、Widget 或進階網格。

在中斷點上隱藏

您可以在「圖層」面板或元素的浮動選單中，隱藏特定中斷點上的某些元素。 例如，您可以在行動裝置上隱藏影像，而不會影響其他中斷點。

若要隱藏特定中斷點上的元素：

1. 按一下頂端導覽中的檢視，切換至要隱藏元素的中斷點。

2. 按一下要隱藏的元素。

3. 按一下浮動功能表上的三個水平點圖示 ()，然後選取「 在此中斷點上隱藏」。 或者，在「圖層」面板中，按一下元素旁邊的 這個中斷點上的「隱藏 」。

中斷點覆寫

變更內容時，您可以從任何中斷點進行變更，而且會影響所有中斷點。 但是，在某些時候您需要覆蓋中斷點。 例如，在主要中斷點上，圖像位於段落的右側，但在移動設備上，您需要將圖像放在頂部，下面的段落。

以下是您可以對元素進行的變更並覆寫主要中斷點：

• 對齊

• 位置

• 尺寸

• 間距