Day 10：「伸縮自如的，橡膠...」- 斷點 / RWD

2021 iThome 鐵人賽

DAY 10

Modern Web

排版神器 Tailwind CSS～和兔兔一起快速上手漂亮的元件開發！系列第 11 篇

13th鐵人賽 vue.js tailwindcss 元件開發兔兔教

搋兔

團隊IT成長營

2021-09-11 03:32:21

3086 瀏覽

Day10-Banner-not-yet

大家昨天的作業有寫嗎？
應該寫得很開心吧 XD

是啊，畢竟可以用這麼簡單的方式來完成，
就能觸發 hover 之類的狀態然後改變樣式。
這可是原本純 CSS、Sass 等做起來會很累的事情呢！

其實今天的斷點 / RWD 要介紹的功能只有一個，
而且用法和昨天一樣是加上一個前綴詞即可。

不過特別一點的是，我們來結合一下昨天的內容，
一起再來回顧一次 Day 2 所寫的一～大～篇～原理吧！

先看一下昨天做的 hover 功能：

最簡單的 hover 變色功能，
昨天用 Tailwind 實作起來超級方便快速。

但，純 CSS 和 SASS 呢？

// pure css
.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
}
.box:hover {
  background: #EBEBEB;
}

// scss
.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
  
  &:hover {
    background: #EBEBEB;
  }
}

看起來沒什麼問題 ... 嗎？
不！這問題可大了！

沒發現 Tailwind 的 hover 可以一行解決嗎？
因為我們在 Day 2 中所提到的，其實 Tailwind 的語法在 css 中其實是這樣的：

.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
}

.hover\:bg-light-gray:hover {
  background: #EBEBEB;
}

沒錯，就是用跳脫字元來達成 hover:bg-light-gray 這個 class。這也是為什麼可以寫在同一行的原因，但你會覺得這些若是都要自己定義，太累了。

這也是我們在 Day 2 長篇大論中討論過的，同樣的這些東西在 CSS、Sass 中都需要自己寫，但 Tailwind 已經把這些功能都是先預定好了，只要用即可。如果裡面有些功能找不到，可以透過 Tailwind 自定義功能來幫你生成所有你可能會用到的 class。

所以同理，RWD 斷點功能的實現，我們先看看純 CSS 的寫法：

.box {
  width: 5rem;
  height: 5rem;
  background: #CCCCCC;
}

@media (min-width: 768px) {
  .box {
    background: #FFEBEB;
  }
}

原本也須要分開寫的斷點功能，現在也可以寫在一起囉，我們下面會介紹如何完成～

其實當初寫 Day 2 的用意就是讓你先看過大量的原理和優缺點分析，接著你一天一天開始了解、練習後，這時候在回去翻翻 Day 2 的內容，你會更有感！

好啦～這些雜談結束了。
我們就開始囉！看我們如何一行搞定 RWD！

材料包

<div class="flex justify-evenly p-5 flex-wrap gap-5">
  <box class="">
    sm
  </box>
  <box class="">
    md
  </box>
  <box class="">
    lg
  </box>
</div>

材料包在這裡

但今天不只一個材料，因為功能很簡單，
不過我們先來完成這個吧！

斷點 (breakpoints)

藉由斷點這個變化模式當前綴詞，我們可以設定 / 改變 元素在特定斷點時的樣式，例如 md:w-full 功能是畫面寬度大於 768 px 時元素寬度會設定為全滿。

以下是預設可以使用的斷點變化模式前綴：

sm: (640 px)
md: (768 px)
lg: (1024 px)
xl: (1280 px)
2xl: (1536 px)

上面這些斷點所代表的數字皆是螢幕最小寬度，也就是螢幕寬度必須在這個數字以上才會觸發斷點的變化模式。

現在直接來實作，我們希望方塊 sm 在小型螢幕尺寸 (small) 以上時能夠變為黃色且寬度全滿，那就在方塊 sm 上使用 sm:bg-yellow-500 以及 sm:w-full，以使螢幕寬度在 640 px 以上 (含 640 px) 時能夠讓樣式生效：

<div class="flex justify-evenly p-5 flex-wrap gap-5">
  <box class="sm:bg-yellow-500 sm:w-full">
    sm
  </box>
  <box class="">
    md
  </box>
  <box class="">
    lg
  </box>
</div>

在寬度達到 640 px 之前

寬度達到 640 px 以上時

大功告成！
這樣就可以控制不同螢幕寬度時的樣式變化了。

我們接著來把 md 和 lg 方塊都完成吧！以此類推，在 md 方塊上加 md:bg-yellow-500 md:w-full，在 lg 方塊上加 lg:bg-yellow-500 lg:w-full：

<div class="flex justify-evenly p-5 flex-wrap gap-5">
  <box class="sm:bg-yellow-500 sm:w-full">
    sm
  </box>
  <box class="md:bg-yellow-500 md:w-full">
    md
  </box>
  <box class="lg:bg-yellow-500 lg:w-full">
    lg
  </box>
</div>

螢幕寬度到達 768 px 時：

螢幕寬度到達 1024 px 時：

可以，就是這樣沒什麼難度。
我把做完的放在這裡，去玩玩效果吧！

我們接下來，就來挑戰實際的例子。

實際案例

讓我們來看看這個實際案例，這是一個兔兔打算把這個做成一套課程來賣的平行時空，這邊是兔兔的網站上的產品卡片，

這裡是原始碼：

<product class="flex flex-col gap-2">
  <img class="rounded-lg" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件開發</span>
    <span class="text-sm">
      相信有在接觸前端領域的人或多或少都會聽過 Tailwind CSS，或是有一些人已經對它很熟悉、甚至是有用過了。
      Tailwind 是一個 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

實際的例子在這裡哦：點我前往

現在兔兔希望在小型螢幕寬度 640 px 以上把卡片的呈現方式改為橫向的：

那麼現在，該怎麼做呢？

首先我們如果需要把直向切為橫向的話，要先注意到它排版的方式。這邊是用 flex 排版，且使用 flex-col 功能來使子元素直向排版，所以我們必須在螢幕寬度 640 px 以上時改為 flex-row，那就把 sm:flex-row 加在最外層，加了之後會發現其實卡片是有指定寬度的，所以再加上一個 sm:w-full 來讓寬度變成全滿：

<product class="flex flex-col gap-2 sm:flex-row sm:w-full">
  <img class="rounded-lg" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件開發</span>
    <span class="text-sm">
      相信有在接觸前端領域的人或多或少都會聽過 Tailwind CSS，或是有一些人已經對它很熟悉、甚至是有用過了。
      Tailwind 是一個 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

加完之後就會看到這個慘狀 ...

摁，因為圖片太～大了，所以我們這邊要來改變一下圖片的大小。把圖片的 img 標籤加上 sm:h-36 來使在小型螢幕尺寸以上時高度為 9 rem：

<product class="flex flex-col gap-2 sm:flex-row sm:w-full">
  <img class="rounded-lg sm:h-36" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件開發</span>
    <span class="text-sm">
      相信有在接觸前端領域的人或多或少都會聽過 Tailwind CSS，或是有一些人已經對它很熟悉、甚至是有用過了。
      Tailwind 是一個 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>

為圖片加上高度之後，看起來馬上就有模有樣了起來。

但別以為這樣完成了！
圖片、文字等等的間距還不太夠，就是還不夠令人舒適，
所以這種時候就需要做微調。

在圖片和右邊的文字敘述中，需要再多點空隙，我們再最外層加上 sm:gap-3，但右邊的標題及商品描述之間的距離還能再大一點來方便閱讀，所以我們在標題上再加個 sm:mb-1 來把其他東西往下推：

<product class="flex flex-col gap-2 sm:flex-row sm:w-full sm:gap-3">
  <img class="rounded-lg sm:h-36" src="https://i.imgur.com/oLn9yvJ.jpg">
  <span class="text-gray-700 flex flex-col gap-1 items-end">
    <span class="text-xl font-bold sm:mb-1">和兔兔一起用 Tailwind CSS 快速上手漂亮的原件開發</span>
    <span class="text-sm">
      相信有在接觸前端領域的人或多或少都會聽過 Tailwind CSS，或是有一些人已經對它很熟悉、甚至是有用過了。
      Tailwind 是一個 ...
    </span>
    <span class="text-red-600 font-black text-xl">$ 790</span>
  </span>
</product>