介紹

響應式設計是現代 Web 開發中的關鍵能力，從手機到桌面應用，我們需要靈活地適應各種屏幕尺寸。UnoCSS 提供的 attributify 模式讓我們可以輕鬆地在 HTML 中使用直觀的屬性來進行樣式設計。本文將介紹如何使用 UnoCSS 的 attributify 模式來實現響應式布局，並著重展示 grid 相關的使用方法。同時，還將探討 attributify 與傳統 class 的優劣比較。

1. UnoCSS 的 attributify 模式概述

attributify 是 UnoCSS 提供的一種模式，允許我們直接在 HTML 標籤上使用屬性進行樣式設計。這樣的寫法簡潔直觀，非常適合快速搭建響應式界面。以下範例展示如何使用 attributify 來進行各種響應式設計。

2. 使用 attributify 進行響應式設計

2.1 基本布局

首先，我們設計一個簡單的響應式佈局，包含標題、主內容和側邊欄。在手機上，側邊欄會顯示在主內容的下方，而在桌面上則顯示在右側。

<div flex="~ col lg:row" gap="4" p="4">
  <header bg="blue-500" text="white" p="4" rounded="md">
    <h1 text="center lg:left" text="2xl lg:3xl">響應式標題</h1>
  </header>

  <main flex="~ col" flex="1" bg="gray-100" p="4" rounded="md">
    <p>
      這是主內容區域。內容會根據屏幕大小自動調整佈局。
    </p>
  </main>

  <aside bg="gray-200" p="4" rounded="md" flex="1 lg:~" order="last lg:unset">
    <p>
      這是側邊欄，在手機上會顯示在主內容下方，在桌面上會顯示在右側。
    </p>
  </aside>
</div>

• flex="~ col lg:row"：在手機上是垂直佈局，桌面上是橫向佈局。
• order="last lg:unset"：在手機上將側邊欄放置在最後，桌面模式恢復正常位置。

2.2 使用 Grid 進行響應式網格設計

grid 是一種非常強大的布局工具，適合用於實現複雜的網格系統，適應各種屏幕尺寸。

<section grid="~ cols-2 md:cols-4 lg:cols-6" gap="4" p="4">
  <div bg="green-200" p="4" rounded="md" text="center">
    <p>項目 1</p>
  </div>
  <div bg="green-300" p="4" rounded="md" text="center">
    <p>項目 2</p>
  </div>
  <div bg="green-400" p="4" rounded="md" text="center">
    <p>項目 3</p>
  </div>
  <div bg="green-500" p="4" rounded="md" text="center">
    <p>項目 4</p>
  </div>
  <div bg="green-600" p="4" rounded="md" text="center">
    <p>項目 5</p>
  </div>
  <div bg="green-700" p="4" rounded="md" text="center">
    <p>項目 6</p>
  </div>
</section>

• grid="~ cols-2 md:cols-4 lg:cols-6"：在小屏幕上顯示 2 列，中等屏幕顯示 4 列，大屏幕顯示 6 列，隨著屏幕寬度自動調整。

2.3 Grid 項目的排列與響應式調整

grid 允許我們靈活地調整項目的大小和位置，可以使用 col-span 來控制每個項目跨越的列數，適用於更複雜的佈局需求。

  <section grid="~ cols-3" gap-4 p="4">
    <div col-span="3 md:2" bg="red-200" p="4" rounded="md" text="center">
      <p>主要內容，佔據多列</p>
    </div>
    <div col-span="3 md:1" bg="red-300" p="4" rounded="md" text="center">
      <p>次要內容</p>
    </div>
    <div col-span="3 md:3 lg:col-span-1" bg="red-400" p="4" rounded="md" text="center">
      <p>附加內容</p>
    </div>
  </section>

• col-span="3 md:col-span-2"：默認情況下跨 3 列，中等屏幕時改為跨 2 列。
• col-span="3 md:col-span-1 lg:col-span-1"：根據屏幕大小動態調整跨列數量，靈活控制項目位置。

2.4 響應式卡片佈局

這個範例展示如何設計響應式卡片佈局，卡片在手機上為垂直顯示，桌面上為橫向顯示，並結合 grid 來控制佈局。

<div grid="~ cols-1 lg:cols-3" gap="4" p="4">
  <div bg="red-300" rounded="md" shadow="lg" p="4" text="center lg:left">
    <img src="https://via.placeholder.com/150" w="full lg:1/4" rounded="md lg:rounded-none" />
    <div p="4">
      <h2 text="xl lg:2xl" mb="2">響應式卡片標題</h2>
      <p>這是一個描述卡片的文字，在不同的屏幕大小下會有不同的排列方式。</p>
    </div>
  </div>
  <div bg="red-300" rounded="md" shadow="lg" p="4" text="center lg:left">
    <img src="https://via.placeholder.com/150" w="full lg:1/4" rounded="md lg:rounded-none" />
    <div p="4">
      <h2 text="xl lg:2xl" mb="2">響應式卡片標題</h2>
      <p>這是一個描述卡片的文字，在不同的屏幕大小下會有不同的排列方式。</p>
    </div>
  </div>
  <div bg="red-300" rounded="md" shadow="lg" p="4" text="center lg:left">
    <img src="https://via.placeholder.com/150" w="full lg:1/4" rounded="md lg:rounded-none" />
    <div p="4">
      <h2 text="xl lg:2xl" mb="2">響應式卡片標題</h2>
      <p>這是一個描述卡片的文字，在不同的屏幕大小下會有不同的排列方式。</p>
    </div>
  </div>
</div>

• grid="~ cols-1 lg:cols-3"：手機上顯示為 1 列，桌面上顯示為 3 列。
• flex="~ col lg:row"：卡片默認為垂直佈局，在桌面模式下改為橫向佈局。

3. 使用 class 和 attributify 的優劣比較

優勢

• Attributify 模式：
  • 語法直觀：樣式定義直接嵌入在 HTML 屬性中，不需要在 HTML 和 CSS 之間來回切換，開發效率高。
  • 快速調整：響應式設計和樣式調整變得更加方便，特別是應用於臨時

樣式時非常快捷。

• 減少命名衝突：避免了類名重複或混淆的情況，樣式更加集中和清晰。

• Class 模式：

  • 可重用性高：定義一次樣式，可以在多個元素上重複使用，特別適合全局樣式和重用設計。
  • 樣式集中管理：所有樣式統一在 CSS 文件或 JavaScript 中定義，維護性較高。
  • 清晰結構：對於大型項目，使用 class 更有助於保持 HTML 結構的簡潔。

劣勢

• Attributify 模式：

  • 樣式可重用性低：樣式嵌入在標籤屬性中，對於需要重複使用的樣式，無法輕鬆複用。
  • 可讀性問題：當屬性太多時，HTML 標籤會變得過於冗長，不利於代碼可讀性。

• Class 模式：

  • 開發效率略低：需要在 HTML 和 CSS 之間頻繁切換，可能降低部分開發效率。
  • 命名衝突風險：當多個開發者協作時，可能會發生類名重複或樣式覆蓋的問題。

4. 結論

UnoCSS 的 attributify 模式讓我們可以輕鬆地設計出適應各種設備的響應式界面，並且使用 grid 提供了強大的佈局控制能力。通過簡潔的屬性語法，我們可以快速搭建出從手機到桌面的佈局，無需複雜的 CSS 編寫，實現優雅且高效的設計。

attributify 和 class 各有優劣，在開發過程中可以根據具體場景靈活選擇。attributify 適合快速搭建和臨時調整，而 class 更適合長期維護和樣式重用的需求。