大家昨天的作業有寫嗎？
應該寫得很開心吧 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>

最後出來的效果就是這樣啦～！ 我放在這裡。

差不多這樣就行了，但就是抓住剛剛那種感覺，在做 RWD 的時候雖然功能少少的就是不斷應用那些變化模式，但其實要注意的小細節非常之多，像文字大小、圖片大小、陰影等等全部都是需要注意的要素。

不過，這邊就再來談個很重要的東西，這也是關乎於為何 Tailwind 的斷點是從手機開始數，也就是為何我們要不斷改寫螢幕寬度變大時的樣式設計。
 

行動裝置優先 (mobile-first)

所謂的行動裝置優先就是先做手機的螢幕尺寸開始設計、撰寫。而這是個趨勢。 會有這個趨勢的出現不但是因為手機用戶日漸增多 (現在是非常多)，還有手機螢幕的範圍能顯示的資訊量比起電腦螢幕實在是少太多太多了！

還有就是，因為手機的版面空間較小，所以設計上會遇到的問題、樣式呈現也較多，但如果把手機畫面設計好，放大到電腦螢幕時也不會出現那麼多的排版問題，但別因此而偷懶，你還是應該要針對各螢幕尺寸做最適合的設計。

再來最後就是，手機的操作方式與電腦不相同，還有手機的性能並不如電腦 (但現在不一定)，所以必須在操作方式及動畫豐富度上做調整。

你可能會覺得，上面這些也可以從大螢幕慢慢設計到小螢幕。 的確是可以的，但是優良好維護設計會是不斷往上擴充，而非往下刪減。
 

呼，今天多了好多字。
希望上面的敘述能幫你更理解一些原理及設計理念，
還有再來就是我們簡單能做到 RWD 的斷點變化模式啦！

講了這麼多終於要結尾了，切記！ 作業要交啊！
然後 ...

今天也有作業哦！ XD
 

給你們的回家作業：

• 作業實施要點：
  • 試著實際案例中的樣式，多增加個產品卡片。
• 功能練習
  • 前面的材料包：快去開箱
  • 做玩的成品：點我對照
• 實際案例
  • 只有手機板：快幫兔兔做 RWD
  • 已符合小螢幕：查答案
     

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

哈哈哈哈～買！ 都買 ... (咳！)
(兔兔唸唸有詞的半夜驚醒)

咦！？
我剛剛不是還在灑我開課賺到的錢嗎？

... 啊 ... 什麼平行時空，原來只是夢 ...