
編輯 X:關於響應式設計
想想您使用多少設備瀏覽網頁,以及市場上有多少設備。現在想想這些設備具有的所有不同分辨率。這有很多可能性...
Editor X 可讓您構建完全響應式的網站,這些網站會自動適應瀏覽網頁的屏幕或設備,每次都能提供最佳的用戶體驗。使用最新的設計技術,如靈活的網格和佈局、流體調整大小和斷點自定義,您可以確保您的網站無論從何處查看,都完全符合您的要求。
在本文中,我們將回顧可幫助您構建響應式站點的 Editor X 功能。
流體和相對尺寸
流體尺寸和相對測量單位有助於創建無縫調整到任何視口的設計。在 Inspector 面板中進行設計時,您可以在固定大小和流體大小選項之間進行選擇。固定意味著無論視口如何,元素的大小都保持不變,而流體意味著您的元素會根據斷點和您的偏好自動調整大小。
您的層是根據親子模型構建的,其中頂層充當底層(即子層)的父層。為了確保您的元素不會重疊並且在每個屏幕尺寸下看起來都很棒,請從上到下設置圖層的大小。
使用百分比 ( % )等相對度量,您可以使子元素相對於其父元素調整大小。例如,無論屏幕大小如何,將一個部分設置為佔據頁面寬度的 50%。您可以對部分中的任何元素或容器執行相同的操作,以使您的頁面盡可能具有響應性。
了解更多:
了解您網站的結構
設置元素的大小

為單個斷點設計
斷點是您的內容髮生變化的點,以便您的訪問者始終看到您網站的最佳版本,無論他們使用何種設備查看。
您的 Editor X 工作區已經包含最常見的斷點(桌面、平板電腦和移動設備),但您最多可以添加三個自定義斷點(總共六個斷點)。這些允許您通過定義設計替代來將您的站點定制為單個屏幕尺寸。重新排列佈局,選擇要顯示或隱藏的內容,並在每個視口大小下自定義設計。
了解更多:
添加、編輯和刪除斷點
跨斷點設計

CSS 網格佈局
CSS Grids 是一種高級佈局工具,可讓您在任何容器或部分中精確定位您的元素。
使用網格,您永遠不必擔心元素在不同屏幕尺寸中重疊。將元素添加到其中一個單元格後,它會自動停靠到最近的角落,因此它始終保持在原位。如果需要,您可以覆蓋自動對接並手動調整。
您可以為每個斷點創建單獨的網格,這使您可以完全自由地為每個屏幕尺寸設計不同的佈局。
了解更多:
對接元件
使用 CSS 網格

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