編輯 X:關於響應式設計

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


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


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

 

流體和相對尺寸

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


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

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


了解更多:
  • 了解您網站的結構

  • 設置元素的大小



 

為單個斷點設計

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


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


了解更多:
  • 添加、編輯和刪除斷點

  • 跨斷點設計



 

CSS 網格佈局

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


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


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

了解更多:
  • 對接元件

  • 使用 CSS 網格



 

彈性盒技術

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

使用我們先進