Tailwind CSS 響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)

使用響應(yīng)式功能變體構(gòu)建自適應(yīng)的用戶界面。

Tailwind 中的每個(gè)功能類都可以有條件的應(yīng)用于不同的斷點(diǎn)，這使得您可以輕松的構(gòu)建復(fù)雜的響應(yīng)式界面而不用離開(kāi) HTML。

根據(jù)常用的設(shè)備分辨率方案，默認(rèn)內(nèi)置了 5 個(gè)斷點(diǎn)：

要添加一個(gè)僅在特定斷點(diǎn)生效的功能類，只需要在該功能類前加上斷點(diǎn)名稱，后面跟 ?:? 字符。

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

這適用于框架中的每一個(gè)功能類，這意味著您可以在給定的斷點(diǎn)更改任何東西，甚至包括字符間距和光標(biāo)樣式之類的內(nèi)容。

這是一個(gè)簡(jiǎn)單的營(yíng)銷頁(yè)面組件的示例，該組件在小屏上使用堆疊式布局，在大屏上使用并排布局。(調(diào)整瀏覽器大小以查看實(shí)際效果)：

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

我們看一下上面的示例是如何工作的：

• 默認(rèn)情況下，外部 ?div ?是 ?display: block?，但通過(guò)添加 ?md:flex? 實(shí)用程序，它在中等屏幕和更大屏幕上變?yōu)?nbsp;?display: flex?。
• 當(dāng)父容器是 flex 容器時(shí)，我們希望確保圖像永遠(yuǎn)不會(huì)縮小，因此我們添加了 ?md:flex-shrink-0? 以防止在中等屏幕和更大屏幕上縮小。從技術(shù)上講，我們可以只使用 ?flex-shrink-0?，因?yàn)樗谳^小的屏幕上什么都不做，但由于它只在 ?md ?屏幕上很重要，所以在類名中明確說(shuō)明是個(gè)好主意。
• 在小屏幕上，默認(rèn)情況下，圖像將自動(dòng)寬度自動(dòng)。在中型屏幕及向上，我們將寬度限制為固定尺寸，并使用 ?md:h-full md:w-48? 確保圖像為全高。

在這個(gè)例子中我們只使用了一個(gè)斷點(diǎn)，但是您也可以使用 ?sm?、?lg?、?xl ?或 ?2xl ?響應(yīng)前綴輕松地自定義其他大小的組件。

移動(dòng)優(yōu)先

默認(rèn)情況下，Tailwind 使用移動(dòng)優(yōu)先的斷點(diǎn)系統(tǒng)，類似于 Bootstrap 這些其它框架中的用法。

這意味著未加前綴的功能類 (像 ?uppercase?) 在所有的屏幕上都有效，而加了前綴的功能類（如 ?md:uppercase?）僅在指定斷點(diǎn)及以上的屏幕上生效。

定位手機(jī)屏幕

這種方式最令人們驚訝的地方是，要為移動(dòng)設(shè)備設(shè)計(jì)樣式，您需要使用無(wú)前綴的功能類，而不是帶 ?sm:? 前綴的版本。不要將 ?sm:? 理解為”在小屏幕上”，而應(yīng)將其視為”在小斷點(diǎn)處”。

不要使用 sm: 來(lái)定位移動(dòng)設(shè)備

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

使用無(wú)前綴的功能類來(lái)定位移動(dòng)設(shè)備，并在較大的斷點(diǎn)處覆蓋它們

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

因此，通常最好先為移動(dòng)設(shè)備設(shè)計(jì)布局，接著在 ?sm ?屏幕上進(jìn)行更改，然后是 ?md ?屏幕，以此類推。

定位單個(gè)斷點(diǎn)

Tailwind 的斷點(diǎn)僅包括 ?min-width? 而沒(méi)有 ?max-width?, 這意味著您在較小的斷點(diǎn)上添加的任何功能類都將應(yīng)用在更大的斷點(diǎn)上。

如果您只想在一個(gè)斷點(diǎn)上應(yīng)用某個(gè)功能類，解決方案是在更大的斷點(diǎn)上添加另一個(gè)功能類，用來(lái)抵消前一個(gè)功能類的效果。

這是一個(gè)示例，背景顏色在 ?md ?斷點(diǎn)處為紅色，但在其他斷點(diǎn)處為綠色：

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500">
  <!-- ... -->
</div>

請(qǐng)注意，我們不必為 ?sm ?斷點(diǎn)或 ?xl ?斷點(diǎn)指定背景色，您只需要指定一個(gè)功能類何時(shí)開(kāi)始生效，而不是何時(shí)結(jié)束。

自定義斷點(diǎn)

您可以在 ?tailwind.config.js? 文件中完全自定義您的斷點(diǎn)：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}