Tailwind CSS - 響應式設計

上一頁
下一頁

響應式設計確保您的網頁內容能夠平滑地適應各種螢幕尺寸和裝置，從手機到大型桌上型電腦顯示器。Tailwind CSS 透過根據螢幕尺寸應用實用程式類來簡化建立自適應介面的過程，從而無需自定義媒體查詢。

要開始使用 Tailwind CSS 的響應式設計，請將視口元標記新增到 HTML 的<head>部分。此標記有助於您的佈局在不同裝置上正確縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

應用實用程式類

要在特定螢幕尺寸下應用實用程式類，只需在類名前新增斷點名稱，然後加一個冒號(:)。這種方法允許您根據螢幕尺寸控制實用程式類何時生效。

示例

<!-- Font size of text 2xl by default, 
        3xl on medium screens, and 4xl on large screens -->
<header class="text-2xl md:text-3xl lg:text-4xl">
    Tailwind CSS Responsive Design
</header>

Tailwind CSS 提供五個預設斷點。以下是每個斷點的最小寬度和相應的 CSS 媒體查詢概述。

斷點名稱 最小寬度 CSS 媒體查詢
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

Tailwind CSS 允許您根據螢幕尺寸自定義幾乎每個設計元素，而不僅僅是佈局。這包括調整字母間距和游標樣式等細節以適合不同的裝置。

以下是一個配置檔案卡元件的實際示例，它可以動態調整其佈局：在較小的螢幕上，它將影像和文字垂直堆疊，而在較大的螢幕上，它將它們並排排列。

示例

<!DOCTYPE>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-200 p-6">
    <div class="max-w-md mx-auto bg-white rounded-xl shadow-xl
                overflow-hidden sm:max-w-lg lg:max-w-2xl
                transition-transform transform hover:scale-105">
        <div class="relative">
            <div class="absolute inset-0 bg-gradient-to-r 
                        from-purple-300 via-pink-400 to-red-300 h-40 
                        sm:h-56"></div>
            <div class="relative sm:flex sm:items-center 
                    sm:space-x-6 p-6">
                <div class="sm:w-1/3">
                    <img class="w-32 h-32 object-cover rounded-full 
                            border-4 border-white shadow-lg sm:h-40 
                            sm:w-40" 
                            src="https://w3schools.tw/w3images/avatar2.png" 
                            alt="Profile picture">
                </div>
                <div class="p-6 sm:w-2/3">
                    <h2 class="text-3xl font-bold text-gray-800 
                            mb-3">Jane Doe</h2>
                    <p class="text-gray-600 leading-relaxed mb-4 
                        text-base">
                        A passionate web developer with a
                        knack for creating intuitive and engaging
                        user experiences. Jane loves exploring
                        new technologies and is always eager to
                        learn and improve her skills.
                    </p>
                    <a href="#" class="inline-block bg-gradient-to-r
                        from-indigo-500 to-purple-600 text-white 
                        hover:from-indigo-600 hover:to-purple-700 
                        py-3 px-6 rounded-lg shadow-lg 
                        transition-transform transform 
                        hover:scale-105 font-semibold text-lg">
                        View Profile
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

此示例的工作原理如下

  • max-w-md 在較小的螢幕上設定最大寬度。
  • 在中型和大型螢幕上，sm:max-w-lg 和 lg:max-w-2xl 會增加卡片的寬度以更好地適應。
  • sm:flex 在中型螢幕及更大螢幕上調整佈局以並排顯示影像和文字。
  • sm:items-center 垂直居中專案。
  • sm:w-1/3 和 sm:w-2/3 在中型螢幕及更大螢幕上調整影像和文字區域的寬度，以確保佈局平衡。

在此示例中，配置檔案卡預設情況下將影像和文字垂直堆疊。我們使用 sm（中型螢幕）和 lg（大型螢幕）斷點來調整卡片的佈局。

使用移動優先

Tailwind CSS 遵循移動優先的設計方法。這意味著您首先建立適用於小螢幕的樣式，然後使用斷點調整較大螢幕的樣式。

在 Tailwind 中，未加字首的實用程式類（如 text-center）預設情況下適用於所有螢幕尺寸。對於較大的螢幕，您使用加字首的類（如 md:text-left）在特定斷點處修改樣式。這有助於您設計一個根據螢幕尺寸變化的響應式佈局。

定位移動螢幕

在使用Tailwind CSS時，請記住，要為移動螢幕設定元素樣式，應使用無字首的實用程式類。sm: 字首用於在小斷點（640px 及以上）應用樣式，而不是專門用於移動裝置。

對於更大的螢幕，請新增特定於斷點的樣式。md: 字首將樣式應用於 768px 及更寬的螢幕。例如，md:bg-blue-500 設定背景顏色為藍色，適用於 768px 及更大的螢幕。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="bg-gray-300 md:bg-blue-500 text-gray-800 
        md:text-white p-6 rounded">
        <p class="text-center">
            This box changes color based on screen size.
        </p>
    </div>
</body>

</html>

相反，請使用無字首的實用程式進行移動樣式，併為更大的螢幕新增特定於斷點的類。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <div class="bg-red-500 lg:bg-green-500 text-white 
                p-6 rounded-lg">
        <p class="text-center">
            This box changes color based on screen size.
        </p>
    </div>
</body>

</html>

因此，請先針對移動裝置進行設計，然後在此基礎上為更大的螢幕構建其他樣式。這種方法使您的設計保持適應性和響應性。

目標斷點範圍

在 Tailwind CSS 中，使用斷點（如md:flex）應用的樣式預設情況下將在該斷點和所有更大尺寸下處於活動狀態。

要僅在特定螢幕尺寸範圍內應用樣式，可以將斷點修飾符與max-* 修飾符結合使用，以將這些樣式限制在該特定範圍內。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <div class="bg-gray-200 p-4 border border-gray-400 
                rounded-lg md:max-lg:bg-blue-300 lg:max-xl:bg-green-300">
        <h2 class="text-gray-800 md:max-lg:text-white 
                   lg:max-xl:text-black">
            Responsive Background and Text
        </h2>
        <p class="text-gray-600 md:max-lg:text-gray-800 
                  lg:max-xl:text-gray-900">
            The background color and text color change based 
            on screen size ranges.
        </p>
    </div>
</body>

</html>

修飾符

  • max-sm: 將樣式應用於小型螢幕（低於 640px）。
  • max-md: 將樣式應用於中型螢幕（低於 768px）。
  • max-lg: 將樣式應用於大型螢幕（低於 1024px）。
  • max-xl: 將樣式應用於超大型螢幕（低於 1280px）。
  • max-2xl: 將樣式應用於 2XL 螢幕（低於 1536px）。

這些修飾符可幫助您透過僅在所需的螢幕尺寸範圍內應用樣式來建立有效的響應式設計。

在特定斷點處應用樣式

使用 Tailwind CSS 透過組合響應式實用程式來根據螢幕尺寸範圍顯示或隱藏元素。

例如，如果您希望僅在中等尺寸螢幕（768px 到 1023px）上顯示側邊欄，並在較小和較大螢幕上隱藏它，請使用md: 類從中等螢幕顯示它，並使用lg:hidden 從大型螢幕隱藏它。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-4">
    <!-- Content visible only on screens between 
        768px (md) and 1023px (lg) -->
    <div class="hidden md:block lg:hidden bg-blue-500 
                text-white p-4 rounded">
        This sidebar is visible only on screens
        between 768px and 1023px.
    </div>
</body>

</html>

此示例確保元素僅在指定範圍內可見。

Tailwind CSS 中的自定義斷點

Tailwind CSS 允許您建立自定義斷點以滿足您的設計需求。您可以在tailwind.config.js 檔案中設定這些斷點。

如何自定義斷點

在tailwind.config.js 檔案中，您可以在 screens 鍵下指定自定義斷點。以下是如何設定自定義斷點。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'mobile': '500px', // Custom breakpoint for mobile devices
      'tablet': '800px', // Custom breakpoint for tablets
      'large-screen': '1400px', // Custom breakpoint for large screens
    },
  },
}

這是一個使用這些自定義斷點的簡單示例。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <div class="bg-gray-200 p-4">
        <h2 class="text-lg font-bold">Responsive Gallery</h2>
        <div class="small:w-full medium:grid medium:grid-cols-2 
            large:grid-cols-3 gap-4">
            <div class="bg-red-300 p-4">Sunny Beach</div>
            <div class="bg-yellow-400 p-4">Mountain Hike</div>
            <div class="bg-green-500 p-4">City Skyline</div>
            <div class="bg-blue-600 p-4">Forest Trail</div>
            <div class="bg-purple-700 p-4">Desert Sunset</div>
            <div class="bg-pink-800 p-4">Ocean Waves</div>
        </div>
    </div>
</body>

</html>

它的作用

  • 小型螢幕上的全寬：對於寬度小於 500px 的螢幕，相簿專案將垂直堆疊以填充整個寬度。
  • 中型螢幕上的兩列：對於 800px 及更寬的螢幕，專案將以兩列網格顯示。
  • 大型螢幕上的三列：對於 1400px 及更寬的螢幕，專案將調整為三列網格。

使用任意值的自定義斷點

如果您需要一個不在預設集中使用的自定義斷點，則可以使用任意值與min 或max 修飾符結合使用，以建立適合您需求的斷點。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 bg-gray-100">
    <div class="text-base min-[400px]:text-lg max-[800px]:text-xl
                min-[400px]:text-blue-500 max-[800px]:text-green-500 
                p-4 rounded bg-white shadow-md">
        This text changes size and color based on custom screen widths.
    </div>
</body>

</html>

在此示例中，文字大小和顏色會根據螢幕寬度發生變化：在 400px 時變大並變為藍色，在 800px 時變得更大並變為綠色。

列印頁面
上一篇
下一篇
廣告