編輯 X：關於響應式設計

想想您使用多少設備瀏覽網頁，以及市場上有多少設備。現在想想這些設備具有的所有不同分辨率。這有很多可能性...

Editor X 可讓您構建完全響應式的網站，這些網站會自動適應瀏覽網頁的屏幕或設備，每次都能提供最佳的用戶體驗。使用最新的設計技術，如靈活的網格和佈局、流體調整大小和斷點自定義，您可以確保您的網站無論從何處查看，都完全符合您的要求。

在本文中，我們將回顧可幫助您構建響應式站點的 Editor X 功能。

流體和相對尺寸

流體尺寸和相對測量單位有助於創建無縫調整到任何視口的設計。在 Inspector 面板中進行設計時，您可以在固定大小和流體大小選項之間進行選擇。固定意味著無論視口如何，元素的大小都保持不變，而流體意味著您的元素會根據斷點和您的偏好自動調整大小。

您的層是根據親子模型構建的，其中頂層充當底層（即子層）的父層。為了確保您的元素不會重疊並且在每個屏幕尺寸下看起來都很棒，請從上到下設置圖層的大小。

使用百分比 ( % )等相對度量，您可以使子元素相對於其父元素調整大小。例如，無論屏幕大小如何，將一個部分設置為佔據頁面寬度的 50%。您可以對部分中的任何元素或容器執行相同的操作，以使您的頁面盡可能具有響應性。

了解更多：

斷點是您的內容髮生變化的點，以便您的訪問者始終看到您網站的最佳版本，無論他們使用何種設備查看。

您的 Editor X 工作區已經包含最常見的斷點（桌面、平板電腦和移動設備），但您最多可以添加三個自定義斷點（總共六個斷點）。這些允許您通過定義設計替代來將您的站點定制為單個屏幕尺寸。重新排列佈局，選擇要顯示或隱藏的內容，並在每個視口大小下自定義設計。

了解更多：

CSS Grids 是一種高級佈局工具，可讓您在任何容器或部分中精確定位您的元素。

使用網格，您永遠不必擔心元素在不同屏幕尺寸中重疊。將元素添加到其中一個單元格後，它會自動停靠到最近的角落，因此它始終保持在原位。如果需要，您可以覆蓋自動對接並手動調整。

您可以為每個斷點創建單獨的網格，這使您可以完全自由地為每個屏幕尺寸設計不同的佈局。

了解更多：

Flexbox 是一個圍繞元素創建的 CSS 容器，以確保它們根據屏幕大小自動排列。它是響應式設計中的一個有用工具，可以防止事情變得混亂，例如當元素重疊或更改其順序時。

使用我們先進�