您今天如何使用響應迅速的網絡組件

幾年前，我開始聽到很多有關Web組件的信息。當噪音降低時，我感到非常興奮，然後完全忘記了它們。事實證明，有一些良好的運動，並且支持開始增加。尤其是響應式的Web組件設置為真正簡化我們如何處理響應設計的方式。聽起來很有前途，許多開發人員今天開始使用它們之前，有四個問題要知道：

他們會…

適合網絡的當前狀態？
• >
工作交叉瀏覽器？
>適應它們被掉入的空間？
• >
促進模塊化代碼？

在本文中，我們將探索每個問題的答案！

鑰匙要點

> Web組件是W3規範，它允許開發人員構建自己的HTML元素，從而可以創建在瀏覽器中本來不存在的UI元素或將常用組件捆綁在社交按鈕或訂閱表單中。

可以使用媒體查詢，Flexbox，Element查詢和屬性等技術使響應式Web組件更加靈活和適應性。這些技術使組件可以適應不同的屏幕尺寸和上下文，從而真正響應它們。
• 使用Web組件的使用允許為每個組件的單個真實來源創建庫，減少代碼重複並允許與其他開發人員或網站所有者共享組件。這種方法促進了模塊化代碼並簡化了響應式設計的方法。
>
什麼是Web組件？
• >
本質上，它們是W3規範，使您能夠構建自己的HTML元素。如果您從字面上不了解它們，那麼可能值得對它們進行快速閱讀，因為我在本文中使用的一些術語需要基本的理解。

>

我為什麼要使用它們？

>

>一個很好的例子，說明您何時可能要使用Web組件，那就是當您在瀏覽器中構建不存在的UI時，例如彩色拾取器，旋轉木馬，手風琴或打字機等元素。另外，您可能會在各個站點上一直使用一些組件，這些組件每次都厭倦了重建。這些是社交按鈕，訂閱表格或通知之類的東西。使用Web組件，您可以使用HTML標籤將標記，樣式和腳本捆綁到封裝的模塊中，例如 參考它們。如果您使用了角指令或反應組件，這似乎很熟悉，但是這裡的好處是它是瀏覽器和框架不可思議的。

> Web組件使您可以構建一次UI零件並在任何地方使用它們。這對於像Living StyleGuide這樣的項目是理想的選擇，您想為每個組件構建一個帶有真理來源的庫。這種方法意味著重複更少的代碼並擁有您或您的團隊可以簡單地將引用到界面中的便攜式組件。

>

>使用Web組件的另一個重要優勢是能夠將這些組件包裝好並與其他開發人員或網站所有者共享。本質上，消費者可以在其網頁中放置一個導入語句，例如：

然後，使用該組件中定義的自定義元素標籤。將此導入到他們的網頁中，他們可以在頁面上擁有自定義組件的許多實例。在訂閱表單示例中，我們可以在頁面上的多個位置使用標籤 。當然，如果您這樣做，則需要確保製作的美麗組成部分非常靈活，並且可以在各種設備和屏幕尺寸上使用。 >

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

>將這些壞男孩變成響應式的網絡組件

>我覺得最好的演示方法是例子，所以我將繼續使用訂閱表單，這是一個常見的UI，在不同的站點和實現之間不會改變太大。

>

這是我之前做過的：

在我的Web組件模板中，我有一些對錶單的基本標記。

>我的標記和CSS被藏在我的組件內，利用了規範的陰影dom部分。這給了我封裝，使我可以在代碼中自由使用標籤和輸入選擇器，而不必擔心其他樣式出血或礦山出血到父站點。 為了清楚和簡潔，我不會寫出除佈局所使用的樣式以外的其他樣式。我使用了Float：左圖和顯示的組合：桌子來實現此佈局，以防止在任何寬度上破裂。

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

>我將使用HTML導入將其拉入站點站點的演示：

>

>現在我們都已設置，讓我們看一些響應式技術。

>

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>媒體查詢

>我們所知道和愛的經典方法仍然活著，並且在響應式網絡組件內都很好。如果您想在某些斷點中烘烤組件，則可以在模板中應用這些模板，也可以將鉤子（例如，使用類別使用類）應用於容器，如果您想將該決定留給消費者。在這種情況下，我們需要做的就是剝離浮子並將其調整為完全寬度。 >

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

但是，媒體查詢這次不足以拯救我們。

>

>我對我的註冊表格樣式感到滿意，並且在體內效果很好，但是當網站作者想將其塞入側邊欄中時會發生什麼？突然，我的表格看起來被壓扁了，並不是真正可用的。

>

這是因為組件不知道其邊界 - 它沒有上下文。

> Web組件的全部要點是您可以將它們放在任何地方，它們可以正常工作嗎？因此，顯然這不會做到，但是您可以使用一些技術來確保您的組件響應迅速且上下文。

> Flexbox Trickery

>如果您正在考慮使用Web組件，那麼您只需要支持現代瀏覽器而不必擔心IE9，在這種情況下，一些Flexbox Magic可能非常適合您將這些魔術轉變為響應式的Web組件。這是我首選的方法，因為它不需要任何其他JavaScript。

再次，這裡的代碼示例純粹顯示了我使用過的佈局樣式：>

通過將容器設置為顯示：flex; flex-inp：包裝，.form__Item元素將出現並排，但是我們仍然需要進行一些調整，以便當容器變得太小時，它們會很好地堆疊。

> 在.form__Item內部，我使用了flex的flex速記：1 0 320px;它以柔性術語轉換為 - 一個生長，柔性收縮為零，柔性基礎為320像素。將Flex包裝設置為包裝，這意味著它不會比我們設置的基礎小（320px）小，但是將其設置為Flex意味著它將佔用其餘可用空間。

>

我給出了與標籤和輸入元素類似的處理。他們的柔性柔性值總計320，這意味著它們在較小的容器尺寸下的行為將按照所需的方式行為。

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

進行這些調整，讓我們看一下Sitepoint的側邊欄中的同一形式：

好得多！但是，有多種方法可以使貓皮膚。

>元素查詢

元素查詢的想法是，您能夠模擬媒體查詢類型功能，但在組件級別 - 對於響應式Web組件非常方便。本質上，想像能夠在您的CSS中寫下類似的東西：

>

>具有元素查詢，這正是我們可以做的。非常強大嗎？

不幸的是，由於瀏覽器供應商關注導致無限循環的潛力，因此該技術不可用。但是，一些聰明的人已經編寫了插件來啟用此功能。

>在我的示例中，我使用了Marc J Schmidt的CSS元素查詢，這是一個非常不錯的實現。也有以下類似的項目：

>基本
>元素查詢
> eq.js

>他們所做的就是使用JavaScript檢測組件的寬度並修改屬性，以便您能夠在CSS中進行樣式。有些是事件驅動的，有些是基於調整大小的。

>

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

>與以上類似的這些插件和小型代碼段的組合結合在一起，我們能夠獲得與側邊欄中的flexbox實現完全相同的結果。

>

屬性

>我們可以為響應式Web組件的消費者提供的很酷的東西之一是通過屬性的API。例如，您可以設置一個稱為佈局的屬性，並具有“小”和“大”的尺寸。然後，我們的組件消費者可以使用它如下：

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

這將觸發小型實現的樣式。

>

在陰影dom中，包含的元素被稱為：主機。一個例子看起來像：

然後，這將允許組件消費者編寫一些簡單的JavaScript，以在您提供的不同尺寸之間翻轉。這意味著您可以將其留給消費者，以決定如何將其掛在模塊中。這使您的組件能夠成為更多的未來證明。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>自己嘗試！

如果您有興趣查看我在自己的機器上使用此演示中所指的flexbox版本，則可以在Chrome中進行以下操作：

>安裝CORS Chrome Extension並將其打開。這是為了允許HTML導入從外部站點工作。

>
1. >刷新此頁面，要么在新標籤或窗口中打開任何網站，因此擴展名啟動。
在Chrome Developer工具中，
2. 在 tag中添加它：

3. <span><span>@media (max-width: 30em)</span> {
   </span>  <span><span>.form__item</span> {
   </span>    <span>float: none;
   </span>    <span>width: 100%;
   </span>  <span>}
   </span><span>}</span>

   >最後，添加：
內的某個地方，您應該看到我的訂閱表格自動磨損。享受！

4. <span><span>.form</span> {
   </span>  <span>display: flex;
   </span>  <span>flex-wrap: wrap;
   </span><span>}
   </span>
   <span><span>.form__item</span> {
   </span>  <span>align-items: center;   
   </span>  <span>display: flex;
   </span>  <span>flex: 1 0 320px;
   </span>  <span>flex-wrap: wrap;
   </span>  <span>max-width: 100%;
   </span><span>}       
   </span>
   <span>label {
   </span>  <span>flex: 1 0 90px;
   </span><span>}
   </span>
   <span>input {
   </span>  <span>flex: 1 0 230px;
   </span>  <span>width: 100%;
   </span><span>}</span>

結論

>上面的方法實際上可以用於任何UI開發，但由於其可重複使用和可共享的性質，它們特別適合響應式的網絡組件。

>如果您尚未查看Web組件，但我強烈建議您這樣做。雖然目前只有在Chrome和Opera中本地可用的規格，但其他瀏覽器供應商不遠。

>如果您在了解有關響應式網絡設計的更多方面有趣 >響應式Web組件上的經常詢問問題（FAQ）

>設計良好的響應式Web組件的關鍵要素是什麼？

>設計良好的響應式Web組件應該具有靈活性，適應性和高效。它應該具有一個流體網格系統，允許佈局根據屏幕尺寸進行調整。它還應該具有靈活的圖像和介質，可以調整大小以適合屏幕。此外，它應該具有媒體查詢，該查詢允許網站根據屏幕尺寸，分辨率和方向等特徵（例如屏幕尺寸，分辨率和方向）為不同設備使用不同的CSS樣式規則。最後，它應該在加載時間和性能方面有效。

>

> CSS容器查詢如何有助於響應式組件？

CSS容器查詢，也稱為元素查詢，允許樣式為根據父容器而不是視口的大小應用。這意味著組件可以根據自己的大小調整其佈局，從而真正響應其響應。這對於在不同情況下重複使用並且需要適應其周圍環境的組件特別有用。

> JavaScript在創建響應式Web組件中的作用是什麼？創建響應迅速的Web組件。它可用於操縱DOM，處理事件並創建動態內容。它也可以與CSS媒體查詢一起使用以創建更複雜的響應行為。例如，JavaScript可用於根據屏幕尺寸或設備功能來加載不同的腳本或內容。

>

>我如何確保可以訪問我的響應式Web組件？設計響應式Web組件時的關鍵考慮。這包括確保在所有屏幕尺寸上都可以閱讀文本，交互式元素足夠大，可以輕鬆地在觸摸屏上挖掘，並且該站點可為無法使用鼠標的人提供鍵盤。此外，您應該使用語義HTML為屏幕讀者提供上下文和含義，並確保對視覺障礙的人的顏色對比足以。

>在創建響應式Web組件以及如何成為什麼方面有什麼共同的挑戰克服？

一些常見的挑戰包括處理不同的屏幕尺寸和分辨率，確保與不同的瀏覽器和設備的兼容性以及優化性能。可以通過使用移動優先方法，在各種設備上進行測試，使用功能檢測來確保兼容性以及優化性能的圖像和腳本。

>響應迅速的Web組件如何影響SEO？

響應式Web組件可以對SEO產生積極影響。 Google的算法喜歡移動友好的網站，而響應式設計是其中的關鍵方面。此外，擁有一個單個響應網站而不是單獨的桌面和移動版本避免了重複內容的問題，這可能會對SEO產生負面影響。

>

>如何測試網絡組件的響應能力？是測試Web組件響應能力的幾種工具和技術。這些包括調整瀏覽器窗口的大小，以查看佈局如何使用瀏覽器開發人員工具中的設備仿真功能以及使用Google的“移動移動友好型測試”（

）的在線工具如何適應。響應式Web組件的未來可能涉及更先進的技術和技術。這可能包括當前正在開發的容器查詢之類的內容，以及更多地使用AI和機器學習根據用戶行為和偏好調整佈局。

>

>我如何了解有關創建響應式Web組件的更多信息？

>有許多資源可用於了解響應式Web組件。其中包括在線教程和課程，書籍和社區論壇。此外，嘗試創建自己的響應組件並研究他人的代碼可能是一種學習的好方法。

我可以使用框架或庫來創建響應式Web組件嗎？有許多可用的框架和庫可以幫助您創建響應式Web組件。這些包括引導，基礎和反應等。這些工具提供了已經響應迅速的預設組件和佈局，從而節省了時間和精力。但是，了解有效使用這些工具的響應式設計的基本原則仍然很重要。

>

以上是您今天如何使用響應迅速的網絡組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！