如何根據屏幕大小創建具有多種可能性的可重用組件？

Question

我正在制作一個用戶界面類似於https://atlas-demo.blogspot.com的博客網站。 整個主頁都使用了一個卡片組件，它在不同的屏幕尺寸下具有不同的布局。 沒有特定的模式，所以我很難創建可重用的組件。

以下是卡片組件的一些可能性：

可能性 #1

屏幕尺寸	布局
移動的	漂浮
葯片	漂浮
移動的	漂浮

可能性 #2

屏幕尺寸	布局
移動的	漂浮
葯片	漂浮
移動的	水平的

可能性 #3

屏幕尺寸	布局
移動的	水平的
葯片	水平的
移動的	漂浮

可能性 #4

屏幕尺寸	布局
移動的	垂直的
葯片	垂直的
移動的	垂直的

我所說的“浮動”、“水平”和“垂直”是指

漂浮：

水平的：

垂直的：

我在這些可能性之間找不到任何模式。 我的解決方法是將layout object 傳遞給定義它在不同屏幕尺寸下的外觀方式的組件。 像這樣的東西：

const layout = {
  mobile: "float",
  tablet: "horizontal",
  desktop: "horizontal"
}

我根據layout object 添加了不同的類：

<div class={classnames(
        layout.mobile === "float" && "mobile:relative",
        layout.tablet === "float" && "tablet:relative",
        layout.desktop === "float" && "desktop:relative",

        layout.mobile === "horizontal" && "mobile:flex",
        layout.tablet === "horizontal" && "tablet:flex",
        layout.desktop === "horizontal" && "desktop:flex",

        layout.mobile === "vertical" && "mobile:flex mobile:flex-col",
        layout.tablet === "vertical" && "tablet:flex tablet:flex-col",
        layout.desktop === "vertical" && "desktop:flex desktop:flex-col",

     )}>
</div>

順便說一句，這是帶有 tailwindcss 類的 JSX 語法。

如您所見，它非常混亂，並且隨着復雜性的增加變得更糟：

1. 當布局不是“浮動”時，如果我希望圖像呈方形怎么辦？
2. 如果我想在卡片上添加一些東西，比如圖標，但它應該在“水平”和“垂直”布局的角落，而在“浮動”布局的中心？

等等。

所以我想聽聽你對此的看法。 我不想讓你做我的功課，我只是需要一些想法。 任何事情都會有所幫助。 也許是我不知道的設計模式？

Answer 1

在我看來，這些區域在邏輯上仍然是划分的，每個區域都可以被賦予一個獨特的 css class。

例如最上面的 slider 可以是ticker ，獨特的行為是，每張卡的布局不會改變

中間區域有 5 張卡片，獨特的行為是，除了featured ，所有其他卡片都會在不同的視口改變布局，例如桌面和平板電腦 = 浮動，移動設備 = 水平

同樣，可以根據上下文創建規則的rest。

很難概括，因此很容易對配置進行硬編碼。

我不是順風專家，所以不能給你一個等效的代碼。 希望你明白我的意思。