喬希。

嗨，各位創作者，歡迎來到這個關于Editor X入門的網絡研討會。我是Editor X團隊的Josh。我們建立這個課程的重點是幫助你更好地了解Editor X平台的基礎知識。在這個演練中，我們的産品經理說，我們將帶領你完成創建一個實時網站的步驟。首先，我們將從Editor X工作區的概述開始，然後我們將看一下如何最好地構造你的網站。我們還將介紹使用各種分層工具的最佳方法，如網格、Flexbox和堆棧。我們還將介紹如何確保你的設計在每個斷點上都是定制的。我們今天要創建的設計是基于一個真實的網站。因此，如果你想在我們進行的過程中參考一下，看看每一步的結果，你可以在Sam Milo design.com上找到它。這就是Sam Milo design.com。所以，如果你想更深入地了解這個平台的功能，那麽一定要查看我們的教育中心Academy X，找到視頻、文章、操作指南和其他大量的教育內容。我們的産品經理、用戶體驗設計師，當然還有其他Editor X的創造者都在那裏分享想法，討論功能並回答你的問題。因此，請注冊並在Editor X community.com上打招呼。這就是Editor RX community.com。好了，說了這麽多，讓我們開始吧。這不是給我的70，這交給你了。

塞比。

好的，非常感謝你，喬希。今天，我們將討論X編輯器，我們將討論如何建立一個網站。我們將重建我在這裏向你展示的這個確切的網站。這就是所謂的SAM Milo網站。這是一個我們自己創建的僞設計師。但它有你需要的一切，以擁有一個響應式網站。為了向你展示，我們要把它的大小調整一下。當我調整這裏的大小時，你可以看到文本是如何縮放的，圖像是如何縮放的。隨著屏幕尺寸的變化，所有的東西都會進入它的位置，它在周圍移動。而這是你知道的，響應式網站的獨特之處在于，它們會隨著屏幕尺寸的變化而調整。所以我們可以讓它稍微小一點，也許是平板電腦的尺寸。你可以看到，當它變成平板電腦尺寸時，又進行了調整。因此，有一個特定的設計用于平板電腦，一個特定的設計用于桌面。這就是我們所說的斷點。因此，我們將在稍後的演講中談及斷點問題。如果你看這裏，我們也有一個網格，這是基于CSS網格的編輯器將涵蓋我們有一個全高的視頻。我們還有一個叫做布局的Flexbox容器，我們今天也會討論這個問題。因此，讓我們繼續前進，開始建立我們的網站。所以我要去打開編輯器。好的，在那裏，我們將從頭開始重建這個網站。在我們開始之前，讓我們先看一下工作區，了解我們的工作內容。這樣我們就可以更有效率地工作了。在這裏，我們有所謂的畫布，在這個大的、開放的空間。我們有這個工具在這裏，你可以移動和調整畫布的大小，你可以看到，在我的光標下有一個右鍵，我的光標，你可以看到有一個數字。這個數字代表我們目前正在編輯的屏幕尺寸。因此，Editor X的一個很酷的地方是，你可以在實際編輯時浏覽不同的屏幕尺寸。你甚至不需要打開不同的設備或打開一個新的標簽或任何東西，你實際上可以在你編輯時預覽網站。你可以看到，當我進入一個較小的尺寸時，我實際上切換到了一個平板電腦。你實際上可以看到不同屏幕尺寸的表現。我們實際上在設計什麽，你可以從這裏看到。這就是我們所說的斷點欄和斷點，它們實際上代表了一系列的屏幕尺寸。所以在這裏，我們為桌面設計了1001像素以上的屏幕，所以任何比這更大的屏幕都會顯示我們在這個斷點上設計的圖案。現在，如果我想為平板電腦或手機設計，我也可以從這裏或使用側面的拖動手柄在它們之間切換。所以，讓我們繼續看一下頂欄，看看我們在編輯方面也有什麽。因此，在頂欄中，我們有典型的網站管理工具，你可以在這裏找到，如果你點擊這裏，我們實際上將打開我們所說的添加面板。該面板是你向畫布或舞台添加內容的地方。因此，在這裏，我們有所有典型的，你知道的，你會發現在一個網站上的組件，我們有按鈕，你有文本，菜單，水平垂直菜單，漢堡包菜單，媒體，你知道，所有典型的東西你會發現在一個網站。然後，如果你看看這裏，我們有布局工具。因此，布局工具是不同的容器，他們可以在你的網站上使用。而且，每個容器實際上都有自己的行為，它是如何負責任的。因此，我們有一個網格容器，我們將單獨談論每一個。所以我知道我現在只是提到了它們。但我們會在稍後的演示中對它們進行討論。所以我們還有基于Flexbox技術的布局，中繼器，這也是基于Flexbox技術的，然後我們有燈箱，這基本上是出現在你的頁面內容之上的任何內容。因此，這可能是一個彈出式橫幅，你知道，無論你想做什麽，你知道，內容不是頁面的一部分，但只是在它的頂部。

如果你看一下這裏，我們有所謂的組合，組合基本上是我們所設計的部分或容器。基本上，你可以添加到你的頁面。這些都是由我們內部的買方設計師設計的，他們非常有才華，而且非常熟練。因此，他們確保在你知道的方面做出正確的決定，把尺寸放在如何組織所有的內容，以及一切。所以這也是一個非常有用的工具，出于教育的原因，你可以使用這個，你可以把它加到舞台上。如果你要點擊一個，我們現在只是要點擊一個。而你實際上可以看到這些組件，你可以看到這些組件所具有的所有不同的價值，並了解這是如何建立的。我將繼續前進，撤銷我們所做的一切，以便我們可以從空白處開始。基本上我們有很多不同的選擇，這裏有不同類型的容器。所以我希望你能使用這個，你知道，無論是出于教育的原因，還是為了引導你的設計，甚至如果你想要一些靈感。繼續往下看，我們有一些商業解決方案，你可以在你的網站上使用，如果你想做一個博客，或者你知道，或者商店，采取在線預訂活動，甚至讓會員注冊，創建配置文件，保存商店信息，類似的東西。你可以使用這個，我們也有一些非常的東西，這被稱為內容管理器。這是一個數據庫，你可以在你的網站上使用，以存儲你知道的，在你的網站上使用的數據，或你想隱藏在後端的東西。你知道，如果你要存儲關于用戶、行為和類似東西的信息，你可以使用內容管理器，你也可以將內容管理器上的任何內容與你網站上的組件連接起來，我們今天不打算討論這個問題，因為它有點更高級。但是，有一些資源可以讓你在內容管理器的學術上找到。另外，對于內容管理器，你可以使用開發模式。開發模式基本上是你可以在你的網站上添加自定義代碼。你可以創建本地應用程序，甚至只是你知道的，在你的組件上創建簡單的互動或行為，你知道的，給它多一點生命力。我們不會涵蓋這些。但是，你知道，為了讓你知道在哪裏可以找到它，它就在這裏的頂欄上。繼續往前走，我們有圖層面板。這對你的響應式網站的實際建設是非常重要的，因為圖層面板表示元素之間的關系。所以在這裏，我們有一個頁面，在這個頁面中我們有三個部分。你可以在這裏看到它是如何代表某種層次結構的。所以，讓我們繼續前進，添加一個組件。所以我們要在這裏添加一個標題，放到這個部分。然後我們回到圖層面板。所以，現在你可以看到，在這個部分裏面，我們有一個標題。所以這代表了這個文本與部分的關系。這是該部分的子部分，在文本中很明顯。這一點很重要，我將在今後的工作中更多地談論它，因為有一些響應式網站，你必須始終考慮組件的相對性。一個核心，你知道這個文本的大小可以影響部分的大小，反之亦然。所以我們會看一看，了解我們在那裏談論的內容。當我們向前走的時候。

在這裏，我們可以找到大師們，他們是你可以在多個頁面上重複使用的部分，所以你可以在你的主頁上有一個標題，你有一個不同類型的標題和你的內部頁面，也許是不同的顔色，不管你想做什麽。創建一個新的母版類型很容易，你可以直接點擊右鍵，選擇設置為母版，你可以看到這裏我可以選擇頁眉、頁腳或章節，頁腳被禁用，因為它不在底部，章節必須在底部才能成為頁腳。好了，繼續往下看，我們有一個頁面管理面板。然後在這裏，我們還可以看到我們的主題管理器，我們的網站風格。所以你可以看到我們有一些文本的樣式，你知道，標題一，標題二，標題三。這一點非常酷，你可以把你的，你的文本連接到它的樣式上，然後你可以直接從這裏更新它。它將在你的整個網站上更新，節省你的時間，保持你的設計一致，確保你不會犯在你的網站上使用不同字體的錯誤。然後在這裏，我們也有你的網站顔色，你也可以用它來連接到組件，這非常有用。現在要記住的是，你不一定需要使用網站尺寸，你可以使用你的外部風格，除了網站風格之外，你知道，對于組件。但這只是將節省你的一些時間，如果你使用它。在這裏，我們有應用程序市場，該市場允許你實際連接，你知道，安裝應用程序到你的網頁上。我們這裏有大量不同的商業解決方案，可用于任何類型的項目。所以我真的建議你去看看。然後，這實際上是一個內容管理器，我們已經討論過了。實際上，我將向你展示編輯器中我最喜歡的一個工具，它就在右手邊，如果我點擊它，它被稱為檢查器，檢查器實際上會顯示一個組件的所有不同的值。所以你可以看到寬度，你知道尺寸，組件的位置，你也可以做設計，你會發現對于一些組件，比如我點擊到部分，你可以看到這裏我也有設計面板。因此，實際的檢查器，它真正酷的地方在于，你可以非常精確，如果你是一個真正的像素完美型的人，你真的可以使用這個，在你的設計中非常精確，並且讓它你知道，完美，記住，一切仍然是一個拖放，但檢查器將允許你有一點點額外的控制。好的，太好了。所以我們已經涵蓋了編輯器。所以我想我們已經准備好了，可以開始實際建立網站了。因此，讓我們繼續前進，在這裏添加我們的第一個組件。我們將進入媒體。我已經在這裏上傳了一些媒體。所以我們可以使用並節省一些時間。而且我有一些文件夾。因此，讓我們進入我們的英雄部分。我們將繼續前進並添加這個電話。

好的，所以手機已經被添加到舞台上了，讓我們把它放大一點，這樣我們就可以玩玩了。好的，那麽這一部分，你知道，我們有我們的，我們的圖像。你可以看到，當我移動它時，在手機的邊緣出現了這些藍色的虛線。所以實際發生的情況是，這些線代表我們所說的對接，對接實際上是向你顯示從組件的起點開始的邊際。所以在這裏，我們有這個組件的起點是該部分的左下方。所以你可以看到在右邊，我們看到同樣的表示，我們有5.5和47像素。所以我只是要把零放進去，只是讓你看到，如果我把它放在00。它就在左下方。所以基本上對接代表一個組件的起始位置。你還可以修改邊距，以確定這些邊緣之間的間距。記得我說過，關系是非常重要的。這也是同樣的想法，即截面的位置是相對于圖像的位置而言的。如果該部分移動，圖像基本上也會移動。因此，這就是為什麽在響應式網站中考慮關系並在你開始之前建立正確的結構是如此重要。所以我們要繼續前進，給圖像一個值。那麽，我們就把25%放在前面，那麽百分比實際上是什麽意思呢？ 百分比實際上是把父母容器的一個百分比作為值，所以如果這個部分變小了，圖像也會變小。讓我們看一看，看看這裏是什麽樣子的。可以看到它是如何按比例縮放的。所以這整個想法是我給了一個25%的部分，部分變得更小。如果我想做一個修複，那麽我會用像素來代替，你知道，這是用于非響應式網站的典型值。因此，讓我們繼續下去，給它一些適當的邊距。因此，我們將從左邊做7%。我們還將在底部做負7%。所以這裏會有一點重疊。但是，你知道，這就是我們今天的設計。因此，讓我們繼續前進，並在這裏添加我們的二級媒體。因此，我們將繼續添加，進入英雄部分並添加這張圖片。我們將繼續前進，並把大小定為30%。我們將使用這些對齊工具，我們將把一條線放在右邊，並對齊到頂部，你可以看到這裏在文件中說0000和線到頂部和對齊到右邊，完美。所以，這裏的一切看起來都很好。讓我們快速調整一下大小。你可以看到，當我調整大小時，你知道，兩張圖片都變小了。在你工作的時候，檢查你正在做的每一步是非常重要的。檢查它是否在工作，檢查圖像的行為，檢查每個組件的行為，確保它是按照你想要的方式調整大小。好了，現在我們要添加一些背景，因為我們幾乎准備好添加一些文本。但是我們需要確保我們在做這個的時候有一些對比。所以我們要去這裏，我們要把這個顔色。好的，完美。我們要添加一些文字。好的，要麽標題一。和工作在叫山姆，我的低。我們也要改變這裏的顔色。讓我們給它這個綠色。因此，確保我們可以閱讀它也將調整這裏，有一些值。所以我們將設置一些自定義間距1%。一個意思，好的，我們也會把一個大小為200。好的，調整一下大小就可以了。我們以後再調整大小。我只是想確保我們有正確的格式化。所以我們在這裏有所有的東西。我們還將給它一個自定義字體，我已經事先上傳了字體。但我要繼續下去，選擇我的自定義字體。

好的，讓它稍微大一點。就這樣。好的，完美。所以現在我們有了我們的文本。讓我們調整大小，看看會發生什麽。就像我說的，檢查一下總是好的。你可以看到其中一件事是，你知道，圖片變小了，但文字沒有。這一點非常重要，我們希望所有的東西都是按比例縮放的。因此，我們需要使文本也有比例。那麽我們如何做到這一點呢？如果你要編輯文本，你可以在這裏找到這個按鈕，它被稱為縮放文本。所以我們實際上可以給它一個範圍，我們希望它如何縮放。所以我們可以說，也許我想讓這個文本在24到200之間縮放，仍將是一個類似于我們之前的尺寸。好的，當我現在調整大小時，你可以看到文本是如何變小的，甚至當我繼續使屏幕尺寸變小、變小、變小時，文本也變小、變小、變小，所以它不會，你知道，在它環繞時為文本創建一個新的行。所以很完美，我們有一個文本，我們要做的就是你知道的，就是右鍵點擊複制。這樣，我們就不需要，你知道，重新格式化這些類型了。我們將做用戶體驗。讓我們在這裏打字。所以我們要做用戶體驗，用戶界面。設計師，好的。這很完美，只是讓它小一點。也許我們還可以把文本的顔色調整為我們在網站上的顔色，我們把它變成白色。現在讓我們再次調整大小，好的。所以這兩個文本都在調整大小，它們都在縮小。但是我們現在有另一個問題，因為文本變小了，它們之間的空間也變大了，因為現在的情況是文本是相對于部分的頂部的，或者說這個文本實際上是相對于部分的中心的。但是，同樣，因為文本的位置不是相對的，我們希望它們是你知道的，在一起，我們希望它們看起來像，你知道的，統一。所以我們需要在這兩個，這兩個文本之間建立一些關系，它們的位置需要相互關聯。所以我們要做的是，我們可以多選文本，我們要選擇堆疊，好的，這裏要花點時間，基本上當我停下來的時候，我創建了一個新的容器，這個容器非常特別，因為這個容器在做什麽，你可以看到這裏我有這兩個文本在裏面。它們的實際作用是讓你在其位置之間建立一種關系。這裏的藍色區域實際上代表了這兩個組件之間的距離。你可以看到這裏我們有72個像素到底部。所以，如果我想把它調整為零，因為我想讓它們接觸，我把零像素放進去，現在它們都互相接觸了。你可以看到它的樣子，你知道，它完全適合。現在，讓我們調整大小，看看它現在是什麽樣子。你可以看到，當我調整屏幕大小時，你知道，正在調整，文字也在調整，並且保持它們在一起的距離。所以現在讓我們繼續，你知道，調整堆棧，給它一個我們想要的正確尺寸。所以，我們要繼續前進，並實際將堆棧向左和向右停靠。當你把東西向左和向右停靠時，它實際上創造了一個延伸。所以我們現在要給它一個拉伸。

請觸摸屏幕的兩個邊緣。看這裏。然後我們也會給這個，這個文本也會給它一個不同的值。因此，我們將在左邊和右邊都停靠。我們希望左邊的頁邊距為6，而我們希望這個頁邊距為0%。很好。我們將對這個做同樣的事情。但是，只是價值有點，我們將給它28%，然後從比率中扣除0。很好。所以現在我們有了一些空間來放置手機，你可以看到手機是如何完全適合的。但現在我們有另一個問題。當我調整屏幕大小時，你可以看到手機是如何下降的。實際上，手機正在下降。因為這個部分停止了收縮，我們希望這個部分和所有的內容一起繼續收縮，因為它是按比例縮放的。因此，讓我們試著理解這裏發生了什麽。因此，我將點擊一個部分，我們將在右手邊看一下，我們有一個高度設置為自動，然後我們也有一個最小高度為692像素。那麽這意味著什麽呢？它意味著，當該部分達到692時，它將停止收縮，無論如何它都將停止在這個值上，可以低于692像素。而自動高度意味著它的值來自于內容。所以我們實際上想讓它從內容中獲取價值，因為內容的縮放，我們希望部分也能縮放。所以我們要去掉最小值，你可以看到它將會使該部分有點塌陷。我們稍後會調整它。現在，當我調整大小時，你可以看到現在所有的東西都是按比例縮放的。當所有的東西都下來的時候，看起來很好很美。所以，現在我們有了這個，我們需要創造一點空間，記住，該部分的高度現在是取決于內容的。所以我們需要做的是創造使控制台大一點。因此，你在這裏可以做的一個技巧是，我們可以使用來自新容器的實際堆棧的邊距來推倒該部分。所以在這裏，我們要繼續下去，給它13%。底部的邊距基本上就像你知道的那樣，是你加入到組件中的空白空間。所以，因為我們有這個13%，它現在要把它往下推。現在我們也要從頂部添加一個百分點，它在這裏看起來會非常相似。我們走吧。這就差不多了。現在，當我調整大小，看到所有的東西是如何按比例縮放的，也許我們需要調整一些數值。稍後。我們將在幾分鍾後討論斷點問題，你知道的。但你可以看到，當我調整大小時，一切都在按比例縮放，正是我們想要的樣子。很好。所以，現在我們要繼續前進，添加一些導航。現在的部分，你知道，我們現在使用的是水平的，但你實際上可以有垂直部分。我已經把垂直部分設計成了一個側邊欄，這實際上是在設計資産下可用的。設計資産是我設計的任何種類的組件或部分，並把它保存起來供以後使用，我可以在同一個項目、同一個網站上重複使用它，或者我可以在另一個網站上重複使用它。而這些設計資産。如果你有一個和你一起工作的團隊，你也可以把這些資産作為一個庫與你的團隊分享。你知道，他們可以重新使用它。要保存，你知道，這很簡單，你可以直接點擊右鍵，你會得到一個保存為設計資産的選項。你可以選擇把它保存到任何地方，無論你想把它保存到哪一個庫。因此，我將繼續前進，在這裏添加我的側邊欄。我們將繼續前進並添加這個。所以只需點擊一下，它就把它添加到網站上。你可以看到它是一個垂直的部分，是水平的。我們可以繼續前進，右鍵點擊這裏，我們將把它移到右邊。你可以看到現在我們有我們的側邊欄，一些在你知道的，我們有一些菜單在那裏，我們有我們的社交圖標。現在的問題是，我不一定能在第一個折疊中看到菜單。也許我希望這個問題在我滾動時被固定下來，一直顯示側邊欄。所以我們可以做什麽，我們可以把它固定下來。因此，我們將繼續在這裏，並把它設置為固定的。現在我們把它釘在了頁面上，你可能會看到這個是固定的。但這裏我們有一個釘子。所以它是釘在頁面上的，很簡單，現在我們有了一個釘子，它隨著內容滾動。而且它總是可見的。所以，這樣做非常簡單。讓我們繼續前進，在左上方添加我們的標志。因此，進入媒體，完成我們的部分，我們將成為沒有標志的英雄。

讓我們把這個變小，也許像這樣的東西。但它在這裏，然後我們會說它是左邊的2%，和上面的2%。此外，我們將只是使高度更緊一點。就這樣吧。很好。然後，我們也會給它一個7%的寬度。這就對了。很好。所以現在讓我們看一看，看看它看起來像什麽。讓我們把它變小。所以它看起來非常好。你可以看到，當我把屏幕尺寸變小時，一切都在排序，你知道，縮減，我們現在確實有一些問題，因為側邊欄在我們的房地産中比你知道的，在手機和平板電腦上變得有點小。所以我們可能需要調整一下設計。因此，讓我們來談談在不同斷點上的設計。所以在這裏，我們有我們為桌面創建的設計，你可以看到它是如何自動級聯到平板電腦和手機上的。現在，某些時候你可能需要調整設計，以便將文本顯示得小一點、大一點，或者隱藏一些組件。你可以在 "編輯 "中直接做到這一點，斷點允許你覆蓋特定的設計屬性，你為不同的組件決定，你可以覆蓋所有這些屬性。而我在平板電腦上所做的任何改變，我在該部分的設計方面不會影響我的桌面。因此，讓我們繼續看看這意味著什麽。所以我將繼續前進，把它停靠在底部。然後我們改變這裏的值。讓我們把它改成零像素。所以它將會給它，你知道，一個伸展。記住，如果你做兩個相反的邊，它會做一個拉伸。現在讓我們去看一下我們的桌面。你可以看到我們的桌面是不變的，桌面上沒有任何變化。平板電腦有，你知道，這個更新的設計。因為平板電腦是下一個，你知道的，移動的上一個斷點，移動將自動繼承這些屬性。所以我們可以做同樣的事情，你知道，如果我們想調整。你知道，例如，我想隱藏這個手機，我將繼續前進，右鍵點擊這裏，我可以說不顯示。現在它將只為這個斷點隱藏它。但同時也是移動端，因為移動端仍然繼承了平板電腦的設計，而桌面端則沒有變化。現在我們要繼續調整這些數值。所以我們要把這裏的邊距移到左邊，因為我想讓它們對齊，同一行。我們走吧。一切都很好，很整齊。也許我們還需要為這個標志添加一個最小值。它變得太小了。因此，讓我們繼續前進，做一個最小高度為80的實際二，最小寬度為80像素。

我們走吧。所以現在它適合。我們可以繼續把它變小。好的

我們走吧。好的，完美。所以我只是要調整這裏的堆疊值。讓我們繼續前進，在這裏設置它的流體管道的左邊和右邊。然後我們繼續前進，對這個也做同樣的事情。分開兩個流體，我們走。很好。現在，我還想調整一下我的設計，我想調整一下手機上的文字，但讓我們繼續，首先讓我們，讓我們移動這個側邊欄。所以我將在這裏點擊右鍵，選擇不顯示。那麽，當我選擇 "顯示 "這個組件時會發生什麽？好吧，我們實際上在做的是，我們只為他的斷點隱藏，你實際上可以在層面板中找到。而圖層面板實際上代表了，根據你所處的斷點，你可以看到這裏，這裏沒有什麽。但是當我這樣做的時候，你可以看到它有一個圖標，說它沒有顯示。因此，讓我們繼續，也讓我們對文本做一些調整，縮放，也許我們可以調整一下，我們將在這裏做45到90到90。很好。我們將在這裏做45到90。

好的，完美。然後我們還將做，我們將改變一下這裏的邊距，只是因為標志變得有點太近。所以我們將做10到10。好的，完美。好的，很好。因此，這是我們為平板電腦，或手機設計的，也許我們想再調整一下。因此，讓我們繼續下去，做一些調整。因此，首先，我們將修複這裏的文件，把它放到6，我們也將從這裏把它放到6。很好。然後，也許我們還想給一些價值，你知道，在底部創造一點更多的利潤。因此，我們將繼續前進，也許我們將從頂部做20，底部做35。因此，我們需要刪除這個高度，我們也將調整對接，我們將做我們將設置這個比例的比例。好的，然後我們也將從頂部設置為40%。就這樣了。然後，也許我們想在這裏再次顯示手機。所以，我們走吧。現在我們有了我們的設計。讓我們再看一次，你可以看到當我把我們的，我們的桌面縮小到平板電腦時，它調整隱藏了手機，改變了文本大小，然後我到了手機上。我現在有了這個，我們缺少最後一件事，那就是我們的菜單在這裏，因為我們有側邊欄，所以我們將繼續前進，進入菜單，進入漢堡包菜單，我們將添加一個我們想要的設計。讓我們稍微調整一下顔色，我們將把它放到瘋狂的綠色。就這樣吧。我們將調整這個尺寸到30和30。因此，30像素到30像素。完美的正方形。完美，將做左上角，就像我們對另一個標志所做的那樣。所以我們將做2%和2%。完美。所以現在我們有了我們的菜單。現在，最後一件事是，我們可能想編輯菜單中的任何內容。所以你可以打開菜單。每當你打開菜單，這實際上顯示了一個容器，就像其他的容器頁面一樣，你可以從添加面板上編輯和添加組件。所以，如果我想添加，你知道，一個社交欄，我可以繼續添加一個社交欄在這裏。我也可以添加圖片，我可以做各種編輯，這對于你知道的，如果你想做一個自定義的導航體驗，這真的很酷。所以你可以做到這一點。你可以打開和關閉它們，就像我在那裏做的那樣。所以我們不會進入你知道的，菜單的具體設計。但只是讓你知道，你可以根據你的需要進行定制。很好。所以，現在我們有了我們的第一個頁面的第一個折疊。因此，讓我們繼續前進，進入下面的折頁，我們將添加一個我之前已經設計好的部分，我們並不打算真的去覆蓋它，因為我們已經你知道，我們已經在前面的設計設計部分覆蓋了這些概念。我們在這裏有一個部分，所以我們要刪除這個部分，所以它不在中間。所以我們有這個，這個部分基本上是一個堆棧，你可以看到，當我調整大小的時候，它實際上是有點縮放的，以確保調整。所以，我們已經涵蓋了這些東西，所以我們不打算深入研究這個。但我們現在要去做一些網格部分的工作。所以我們要添加我們的第一個，也許我們可以先添加標題。在我們實際工作的這一部分之前。我們將添加我們的最近合作的標題，然後我們將添加一個網格，所以你可以在你的頁面上的任何部分或任何容器中添加一個網格，你可以直接點擊進入一個巨大的可以找到這個作為播放網格。而且你可以添加你想要的任何類型的網格。所以讓我們在這種情況下，我們將做四列兩行。

這是我們的設計，這只是調整了一下大小，所以我們有一個更寬的空間來工作。我們還將在下面添加一個部分，這樣我們就可以在不滾動的情況下看到整個部分。很好。所以我們在這裏有了我們的部分。現在，為了理解網格，網格的實際作用是，它得到一個容器，並將這個容器劃分為不同的區域。所以在這種情況下，你有不同的單元格，或者我們甚至可以有行，你知道，我們有，你知道，這裏有行，這裏有行，這裏有列，這裏有列。這些都是你可以創建的不同區域。這使你能夠完全控制這個特定的區域，以及這個區域內的組件。因此，我將在這裏添加一張圖片，以便我們能夠理解這實際上意味著什麽。這張圖片。首先，當我移動它的時候，你可以看到那些變暗的線條不再是相對于這個部分的。現在，這個文本的位置，對不起，這個圖像的位置是相對于它所在的網格單元的，或者說它所在的網格區域，如果它是超過一個網格單元的話。所以你可以看到，當我移動它時，這些線條也在移動，並與不同的網格線對接。所以我想把它放在這裏。我還想點擊這個按鈕，這是一個拉伸，所以只是因為它因為在這四個單元格上，它只在這四個單元格上拉伸。所以這個圖片的大小和位置不是相對于網格區域而言的，它說的是在這種情況下的這四個單元格。所以我們可以玩一玩這個。所以，也許我也想在這些單元格上設計一下，這些單元格也是。現在要記住的是，網格並不是一個容器，實際上，你知道，它是容器的屬性，允許你創建這些區域。所以我不一定能在網格單元中添加背景。因此，如果我想給網格單元添加背景，我需要做的是，我需要進入這裏，我們將添加一個容器。因此，我們將在這裏做容器，我們將做一個拉伸，就像我們之前做的那樣。此外，我們將改變刪除邊界，我們將給它一個我們想要的顔色。對不起，我們想把它作為背景。因此，我們要做的是背景。很好。所以現在我們有了一個背景。我將為另一個做同樣的事情。所以我只是要通過使用我的鍵盤快捷鍵進行複制。我把它拉到這裏。我們將在這裏做一個瘋狂的綠色。完美。好了，現在我們有了我們的第一個設計。我們將繼續前進並添加一些文本。所以我們在這裏添加一些文字。我們也要給它適當的值。讓我們先給這一個。所以，在這裏，Mass。完美。我們還將給它一些縮放比例。因為我們也想在較小的斷點上工作，你知道，我需要做的調整越少，對我來說就越容易，所以我會這麽做。所以我們會做自由質量，我們也會到，會做Docker到左邊和右邊。所以在右邊，我要把0% 因為如果它碰到了邊緣也沒關系。但是在左邊，我希望它是我們將它放在6。或者我們實際上可以做6%。然後我們會做聲音實際上我們會做334完美。我們去那裏。這是不存在的。因此，我們將做4％這裏。完美。因此，我們有這個，然後我們將繼續前進，只是也許我想把Helvetica在這裏，所以Helvetica完美，看起來更漂亮。所以我們要複制這個文本。只是讓你知道，我們不需要做所有的複制和粘貼的值。所以我們再做一次三和四。

在這裏，我們將是正確的。嘿，他們也會把這個設置為白色。完美，現在我們要在這裏添加文本。在這裏，我們將做我們應該做的。6個3% 6%從左邊開始。3% 完美。好的，很好。所以，嗯，很好。謝謝。她只是這一個標記。所以他們注意到的一件事是，這裏的保證金的價值基本上是我們這裏的一半。所以為什麽會發生這種情況，你可以看到我們有三和四。而這裏我們有1.5。發生這種情況的原因之二是，請記住，百分比是取父體的一個百分比，並將其作為數值。現在，在這種情況下，這個文本覆蓋了兩個單元格。所以它是這兩個單元格的兩倍大。所以這就是為什麽我們必須把它減半，因為實際的父本是兩倍大。而我們想保持類似的邊距。所以要牢記這一點。就它而言，你知道，你必須始終牢記，如果它在一個網格內，它的實際尺寸是相對于它所在的網格，而不是直接相對于父網格。因此，我們將調整這裏的顔色，所以我們可以看到這個，把它設置為黑色。很好，然後我們繼續，從頂部做152，把這個設置為零。完美，太好了，也應該是零。很好。所以，讓我們看一看，看看我現在調整大小的時候是什麽樣子，哦，夥計，我需要只讀這裏的文字。所以讓我們來做

然後需要把我們的縮放比例再次，我們去不小心點擊刪除我們的風格在這裏。所以現在我們回來了。完美。所以，讓我們調整大小，看看它看起來像什麽。你可以看到它看起來很好，因為我調整了大小。現在唯一的問題是，你知道，方形單元格現在有點變得，你知道有點畸形，它們變得更像矩形。所以我們需要做的是，我們需要了解我們在這裏工作的內容。所以，首先，讓我們看一下網格。讓我們理解為什麽網格會這樣做。所以讓我們進入調整網格，點擊編輯網格。這將打開我們所說的編輯網格模式。這將顯示網格的所有不同值，行和列。在這種情況下，所有的列被設置為一個fr，實際上是剩余空間的一部分。所以它占用了其他單元格的多少空間，你知道，其他的值。並將其作為一個分數來應用。因為我們有四個分數，每一個都有一個分數，它們都是相等的。因此，如果我把這個，你知道，我們把這個改成兩個分數，我們把它改成現在的樣子，因為這是兩個分數，總是要比其他兩個分數大一倍。因此，在網格方面，分數是非常容易處理的。所以我真的建議你知道，如果你可以嘗試使用分數，你也可以使用其他類型的單位，我們有自動只是這樣做的部分，頂部的百分比像素，視口寬度，視口高度，我們將在一會兒談論這兩個。最小最大，如果你想要一個最小和最大的範圍，你知道一些組合，然後你也可以有最小的內容最大的內容的計算是一個更高級一點的。在這次網絡研討會上，我們不會涉及這些。但你可以玩玩這個，你也可以使用你知道的拖動手柄來調整這些值。我們將把它們設置為1，然後我們再進行調整。你知道問題出在高度而不是寬度上。所以我們需要看一下行的情況。所以讓我們看一下行的情況。所以實際上現在的行值是一個最小和最大的值，最小是像素，最大是最大的內容，最大的淘氣只是基本上意味著內容是派生出最大的尺寸，在這種情況下。所以我們的最小值是250像素，記住，最小值是要阻止它縮小的。因此，我們希望在內容允許的範圍內盡可能地縮小它。所以在這種情況下，我們將把它設置成一個分數，我們在這裏也要做分數。因此，這樣他們就等于一個分數一個分數，完美。它沒有什麽變化。你可以看到當我調整大小時，它的行為還是一樣的。但是為什麽它的行為是一樣的，因為我們仍然要調整這個部分，記住，這個部分也有自己的值。所以在這種情況下，我們需要調整部分，我實際上要做的是我希望屏幕的寬度隨著屏幕的寬度變小，部分的高度也要變小。所以我需要給它一個值，使屏幕的寬度也正好如此。所以我要做的是把40 V w，所以視口寬度是翻譯，你可以看到這裏，是視口寬度。這實際上是在做什麽，我給它40%的屏幕尺寸，視口是屏幕，所以40%的屏幕作為高度。所以你會看到將要發生的事情實際上是一個比例的縮放，因為現在高度和寬度都以相同的速度縮放，導致它有這種行為。只要它變小了，你就可以看到它的空間變得有點太擁擠了。所以，也許我想把它調整一下。因此，我們將點擊調整網格，點擊這個2乘4的切換器布局，我們將改變這裏的最小值為500，使它們變得更小。現在我有一個完全響應的網格部分。

所以你可以看到，網格是一個非常強大的工具，給你很多控制權。設計不一定要在一個網格中。這只是我們在這個例子中的設計方式，但你可以看到它是如何通過創建不同的區域讓你完全控制裏面所有元素的大小和位置的。所以，我們將繼續前進，並在另一個SEC組件類型上工作，我們將在圖像上工作一下。這樣我們就能理解如何在響應性方面對圖片進行處理。因此，你可以添加我們添加的部分。不，我們只是我們沒有真正關注設計的實際構建，而是關注圖像本身。你會注意到的第一件事是，我們有三個模型，而中間的模型不幸地被文本所覆蓋。我們想確保它們都很容易看到。所以我們有的就是我們有這個將稱為焦點的東西，它在響應網站設計時非常重要，因為焦點允許你調整圖像的焦點，確保你知道上面的任何組件不被覆蓋記住，響應式網站意味著一些組件會移動。所以這給了你控制權，你可以根據每個斷點來設置焦點。所以現在我給下巴設置了一個焦點，你可以看到現在你知道圖像向上移動了一點。現在很容易看到了。下一件事是也許你想放一些你知道的滾動效果。所以在這種情況下，我想把你知道的滾動行為改為視差，這只是要給它一點深度效果，圖像會移動一點，但這只是預覽，當你真正去看實際的網站時，你會看到區別。你知道，我們將從頂部開始並向下滾動，你可以看到它是如何創造這種深度效果的。所以它非常酷，非常容易為你的圖像設置，你知道在另一個組件的背景或下面。好的，繼續，我們將繼續並添加我們的下一個部分，這實際上是我們的中繼器部分。我們將在這裏找到它，並設計資産。我們不打算從頭開始建立它，但我們要玩一下，以便你們可以了解中繼器的工作原理。但中繼器在本質上，基本上它是什麽，是一個顯示多個項目的容器，設計完全相同，但每分鍾每個項目的內容不同。因此，讓我們看一下設計屬性。所以，如果我繼續點擊這張圖片，然後把它變小一點，你可以看到現在，所有其他項目也都變小了，這是因為所有項目都有同樣的設計。所以你可以看到在這裏，如果我點擊中繼器，我們還有改變布局的選項。我們有不同類型的布局，在這種情況下，我把它們顯示為卡片，我可以把它改成列表，你知道，這裏是我們的列表，當然我們可以調整數值，顯然對我們的設計來說有點太，太大了。但這是你知道的，只是為了向你們展示它的樣子。在這裏，我們也可以選擇一個滑塊。滑塊基本上是想象你在你的手機上，你可以滑動內容，當你用你的手機滑動時顯示內容。我們將繼續前進，撤銷這兩項，這樣我們就可以看一看，看看它是什麽樣子的，哦，順便說一下，你也可以控制這些項目。所以，讓我們看一看，看看在斷點之間是什麽樣子。你可以在這裏看到我們的電話。而這可以在這裏調整。我們會說，讓我們把它設置為每行可能有三個項目。開始。然後在手機上，我們有滑塊布局。因此，這是一個非常有用的工具，非常酷。如果你使用內容管理器，你可以把你的內容連接到這裏，我，你知道，你創建一個新的項目，內容將自動填充這些組件，如果你把它設置為與內容引擎一起工作。很好。所以繼續，我們現在要實際工作，你知道，創建一個全高度的部分，我想首先添加這個標題，在這裏，我們將右鍵點擊這裏，將它移到頂部。好的。很好，讓這個長一點。很好。所以我們要在這裏設置一個最小高度，100英尺。現在我們取視口高度的100%，因為100VH意味著視口的100%。並將其作為網站部分的值，所以這個部分本身總是要適合屏幕的大小，我們將在這裏添加一些背景，我們將把這個放在這裏，我們也將添加一個圖片，或者實際上，我們將在這個案例中添加一個視頻。讓我們看看，在這裏我們去。我們可以從這裏放下它。

而且我們要把它拉長。所以很好，我們有了我們的視頻，它適合全屏，這很好。但是，你知道，也許我想展示你知道，只是改變一下設計，以顯示該部分的背景。你知道，因為覆蓋該部分的視頻，點擊進入一個部分可能有點困難，你可以使用這裏的檢查器，我們可以使用這裏的面包屑來選擇，或者使用層面板來選擇該部分。在這種情況下，我們只是要使用面包屑，我現在選擇了一個部分，你可以看到這裏有一個部分，我將添加所謂的padding。在這種情況下，我們有一個部分。我們想在這裏從左邊做一個3%，我們想把這個應用到所有的側面。現在我們有，你知道，點擊這個鎖會應用到所有的邊。所以現在我們有了漂亮的部分。如果我點擊預覽，你可以看到它是如何適合整個屏幕的。它看起來很好，你知道對于顯示視頻、圖像、任何類型的全高內容，你可以使用這種類型，重視視口高度，你知道，如果你試圖這樣做，現在我們要繼續和布局一起工作，這與網格非常相似。它是一個容器，允許你在斷點之間創建不同的，你知道的布局，並允許你控制這些項目。所以，如果你熟悉CSS的話，它實際上是基于Flexbox的基礎上的。Flexbox的作用是，它實際上使用了一些邏輯，以分配不同項目之間的間距，所以根據可用空間的大小給出項目的大小。所以你可以看到其中一件事是我要刪除這個項目，我們有四個項目，我刪除了這一個項目。現在因為我刪除了這一個項目，內容就會自動調整。這就是布局允許你做的事情，就是讓內容，我只是隨著布局的大小或調整，內容也會調整，你可以在這裏看到，當我把這個變小和變大時，你可以看到實際的設計是如何調整的，你會看到，如果我讓屏幕大小也改變，也是一樣的。它給了你很多控制權，你知道給了你很多你知道的流動性，並允許你輕松地設置一個響應式的部分，而不必做那麽多複雜的工作。讓我們來看看每個組件、每個項目的數值是如何設置的。所以你可以看到，這個項目的數值是20%，這個項目的數值是40%，這個項目的數值是20%，它們的最小寬度也是200。因為沒有足夠的空間來容納，你知道，它們都是200 所以會是600。在第一行中，有足夠的空間容納600個，實際上發生的情況是，它為這個項目創建了一個新的、完全新的行。因為它是一個新行，這個項目需要占用所有剩余的空間，即使它是20%，你知道它會占用100%，因為這裏唯一的項目現在如果我添加一個新的項目，我只是要在這裏點擊右鍵，把這個項目放到字母中，看看有多簡單。現在我們有20和20在兩邊。這不是50，它看起來是50。但因為它占用了剩余的60%，並在這兩個項目之間分割，所以它會像這樣調整大小。而且你實際上可以像這樣玩弄數字，你實際上可以非常容易地移動這些項目，你可以點擊這裏，只是移動它們，你知道，無論你想怎麽調整它們。因此，使用這個布局是非常酷的，它為你節省了很多時間。關于這裏的布局的另一件事，就像中繼器一樣。它有自己的布局類型，你可以選擇，你知道，列行滑塊，以及，你知道，調整內容，給你真正尋找的布局。所以，現在我們要為布局添加一個最終的設計，或者只是讓我們看到你可以通過布局真正實現什麽。因此，我們將回到設計資産，我將添加我的布局或我的設計之前，我點擊了錯誤的部分。我只是要撤消一下。好的，所以我們將繼續前進，並添加或外部在這裏。

很好。所以現在我們有了我們的布局，或者你可以在這裏看到我們如何有多個項目。當屏幕尺寸變小時，它們都在調整大小，它只是開始有點環繞。顯然，你可以，你知道，如果你想從布局中隱藏一個項目，你可以繼續前進，並點擊右鍵，隱藏不顯示，就像我們之前做的那樣，現在會自動調整，然後你可以玩弄焦點，就像我之前展示的那樣，我可以調整焦點也許是這樣的。是的，不管你想做什麽。然後，當我們進入移動領域時，我們有不同的布局，同樣，我們可以移動這些項目，你知道，並根據斷點來調整它們。所以，這是我們的網站，你知道，我們涵蓋了很多。我們有一個，你知道，很多不同的組件和很多不同的行為在這裏。但是，你知道，在大多數情況下，所有的東西都是，你知道，按比例縮放，我們有一個漂亮的，漂亮的，瘦的比例的頭。你知道，文本，我們有一個網格圖像，一個全高部分的重複器，以及我們的布局。這就完成了我們今天的網站和網絡研討會的工作。所以非常感謝你的加入。現在我們將繼續進行，並接受一些問題。

喬希。

謝謝你，Sebi。這是一如既往的深入，我們不打算涵蓋這些會議中出現的一些流行的常見問題，如果你不介意的話，我將向你提出一些問題。請講。好的。因此，第一個問題是，為什麽要在較低的突破點上調整技術尺度。

塞比。

好的，所以基本上，當你設置文字比例時，你要設置它，你知道，我在桌面上設置它。如果你把它從最高的斷點一直設置到較低的斷點，並不總是完美的，因為你知道，有一個很大的屏幕尺寸範圍。請記住，你設置的基本上是一個比例，正如你在這裏看到的，它基本上是一個範圍，你知道，你有24到200。而屏幕尺寸的範圍也是非常大的。所以變化，你知道它的規模有多大。而我想對我的桌面尺寸有更多一點的控制。對不起，我的桌面和我的平板電腦尺寸。所以我給了它我們在桌面上的縮放比例。然後我說，你知道，在手機上的平板電腦上，224到200是，可能太多。因此，也許我需要調整它只是一點點。所以我給它45到90。但這主要是因為我想確保我在平板電腦和桌面上都有一個好的範圍。

喬希。

很好。第二個問題是，你能不能把一些東西設置為不在桌面上顯示，而在平板電腦或手機上出現？

塞比。

是的，實際上，我們在演講的早些時候已經涉及到這個問題。但基本上，如果你看一下平板電腦部分，我已經隱藏了手機圖標，你可以在圖層面板上看到手機圖像。如果我點擊進入該部分，我們實際上有一些東西被隱藏了。我們有漢堡包菜單，我們也有漢堡包菜單的圖像。我已經事先把它添加到了手機裏面，當你在一個較小的斷點裏面添加一個組件時，它會自動把它隱藏在較高的斷點上。然後你也可以右鍵選擇在你的頁面上顯示任何種類的組件。它將自動從這個斷點和任何較低的斷點隱藏它，如果它是如果你是這樣設置的。

喬希。

很好 這是個很重要的問題，我們經常遇到，使用網格和堆棧的區別是什麽？

Sebi:

使用網格和堆棧。所以，首先是堆棧，是真正理解，正如我前面提到的，理解組件之間的關系是非常重要的。而通過堆棧，你所做的實際上是在多個組件之間建立一種關系。在這個例子中，我做的是文本，但你可以添加各種組件，可以添加一個畫廊、圖像、文本按鈕，而你所做的是在這些組件的位置之間建立一種關系。所以你可以對這些組件的位置有很多控制，已經創建了某種垂直邊距，堆棧只在垂直邊距下工作。現在，網格給了你更多一點的控制，你不一定在兩個項目之間建立關系。但是你，你知道，在一個網格單元內添加一個項目，然後，這個網格單元的位置也是相對于它下面的網格單元的。所以它是一種創建類似的行為，但它有很多你可以用網格做的事情。但是你知道，在某些情況下，它需要更多的設置，因為它有，你知道，你對大小和位置以及類似的東西有這麽多的控制，你可能需要，你知道，配置它多一點，當涉及到設置元素之間的關系和創建那些垂直邊距時，堆棧是非常快的。

喬希。

很好，那是真的。謝謝你。這把我們引向下一個問題，當在移動端堆疊時，也會在桌面和平板電腦上堆疊。

塞比。

是的，所以基本上，記得我之前展示過，一個堆疊，當你創建它時，它實際上在組件後面創建了一個容器。而斷點是你用來覆蓋設計屬性的。設計屬性是，你知道，如果我們談論的是HTML，CSS設計屬性來自CSS。當你改變一個網頁的結構時，你實際上在改變我們所說的HTML。而在這種情況下，如果你在手機上創建一個堆棧，它將改變你在桌面上的結構。因此，無論你在桌面上做了什麽，對不起，在手機上做了什麽，都會反映在桌面上。因為現在我們已經改變了HTML，而HTML在斷點之間不會改變。HTML在所有網站上都是一樣的，它需要在所有不同的斷點上都有相同的結構，但你可以對這個結構有不同的布局。因此，內容可以被移動可以在另一個上面。但無論如何，它都需要始終擁有相同的父本。所以在這種情況下，我們要為那些通過添加到堆棧中的項目創建一個新的父級。所以這就是為什麽它會影響到所有的斷點。

喬希。

很好。那麽，當我們在討論斷點時，所有的斷點、尺寸、預設，如果有的話，它們被設置為什麽？

塞比。

當然，我們確實有一些默認的尺寸，你的新網站有1001像素以上的尺寸，它幾乎涵蓋了所有常見的桌面屏幕，或者你知道的，電腦屏幕，我們有751-2000像素，也幾乎涵蓋了所有的平板屏幕。對于移動設備，我們有320至750像素，這些都是默認值，如果你想的話，顯然可以調整，其實並不需要，因為我們已經覆蓋了，你知道，所有這些不同範圍的最常見的屏幕尺寸。但在某些情況下，也許你想，你知道，調整它只是一點點。因此，你可以點擊進入這裏，從這裏調整它，點擊編輯，你可以完全控制這裏。或者你可以添加一個全新的，如果你想有一個特定的設計，我知道也許是非常大的屏幕，你可以添加一個新的斷點，或者為也許是iPad Pro的蘇設計，在這種情況下你也可以添加一個新的斷點。

喬希。

很好。為什麽當你在手機上改變網格布局時，桌面上的布局，不好意思，沒有受到影響？頁面的結構會發生什麽變化？

塞比。

當然，回到我們之前討論的，關于頁面的結構，為什麽改變頁面的結構會影響所有的斷點，當你使用網格時，網格實際上是一個布局屬性，它不一定是一個容器類型。所以你可以在圖層面板中看到，我將進入部分，我們可以看到沒有網格容器來容納其他的東西。該部分本身仍然是容納所有其他內容的容器。因此，這就是為什麽如果你添加一個網格，並在較小的斷點上調整網格，在像上面的斷點方面不會發生什麽，因為我們沒有改變網頁的結構。我們只是改變了布局的屬性，即網格。所以，這也是為什麽網格如此偉大的另一個原因，因為你可以為每個範圍創建這些非常獨特的精心設計。你為每個斷點都有屏幕尺寸。而且它不會影響其他斷點。而如果你只用容器來創建這個設計，如果你搞砸了，不小心把一些東西放在了錯誤的位置，那麽它可能會影響你的斷點。

喬希

很好。那我們怎麽知道什麽時候應該使用布局網格來重複它。

Sebi。

所以基本上，如果你，你幾乎要記住，你知道，他們都是不同的。他們都有自己的使用情況，在大多數情況下，布局，或者你可以很容易地創建一個響應式設計，只需點擊幾下。而你卻對項目的尺寸沒有那麽多控制。請記住，如果你有一個項目是20%，那麽這些項目就是20%。而且它是這個布局中唯一的項目，或者它實際上會被拉伸，因為布局或有一些邏輯，使所有的項目在布局中被拉伸。它使用一些邏輯來確定它們是如何被拉伸的。所以你在那裏失去了一點控制。但你可以創建某種布局。而且還要記住，布局實際上就是我們所說的一維容器。因此，實際的內容是向一個方向流動的。所以它要麽是行，要麽是列。現在在我們這裏的信中，這些實際上是行。所以我們有一個行，現在創建一個新的行。但是這些行，如果我要做這個，我就把這個變小。你看，因為我把它變小了。現在這個項目往上移了，因為這裏發生的事情是這個行是不能容納所有的內容。所以它只是圍繞著創建一個新的行。但這並不像網格那樣，你可以設置每一行都有自己的值。在這裏，你有一行只是按Z順序環繞。而在網格中，你知道，我們已經提過無數次了，你可以完全控制每一列，每一行，你可以創建一個更複雜的設計，有更多的值，你可以為每一行和每一列使用的單元類型。中繼器與布局非常相似，或者在你知道的情況下，使用Flexbox。但在大多數情況下，你使用的是共同的元素或項目，在多個項目中具有相同的設計。所以這就是中繼器的用例。

喬希。

很好。所以，當我們以尺寸為主題時，當以百分比寬度或高度來確定尺寸時，是與父母容器有關的百分比。

塞比。

是的，所以百分比總是要取父母的值，並得到父母停止收縮的百分比，因為它有一個最小值，它要停止收縮，以及正在收縮，它也會收縮的。因此，通常，在響應式網站中，這可能是最常用的單位類型。因為它是一種簡單的關系，你知道，在容器和裏面的孩子之間。所以，通常，你會使用這些

喬希。

偉大的Sebi 非常感謝你，你總是非常深入，非常有幫助。而這幾乎涵蓋了我們這次會議的介紹性演示。我們真的希望你們覺得這節課對你們有幫助，給你們提供在Editor X上進行創作所需的知識基礎。記住，如果你想了解更多關于我們在這段視頻中所涉及的內容，你可以查看我們的學院X。還有，如果你有任何問題，請確保在我們的社區X論壇上注冊並加入對話，或者直接寫信給我們，聘請Editor X.com我們總是喜歡聽你的意見。直到下一次，我們會很快見到你，並繼續創造。

‍