iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

TailwindCSS - 從零開始系列 第 7

TailwindCSS 從零開始 - 手機到桌上螢幕,所有的元素都能自適應

tailwindcss

跟 Bootstrap 一樣也是手機優先的響應式斷點設計,官方文件也提供尺寸對照:

rwd

讓前端在開發輕鬆在 HTML 上寫斷點,不用特別去 CSS 撰寫了。

直觀又好懂的斷點寫法

我可以透過 斷點:條件 的方式來撰寫斷點,例如:

<img class="w-16 md:w-32 lg:w-48" src="...">

這一段是表示:

  • 手機圖片寬度為 16rem
  • 平板圖片寬度為 32rem
  • 桌機圖片寬度為 48rem

demo: https://codepen.io/hnzxewqw/pen/XWMPEZp

官方推薦是從小到大的斷點依序撰寫,好讀又直觀,當然想要隨意換順序也可以,但為了以後維護,還是有順序的寫會比較好。

不只單元素,合體技也可以

demo: https://codepen.io/hnzxewqw/pen/WNpgzgb

Tailwind 因為可以自由控制元素達到響應式的效果,所以上方範例手機板看起來是一張卡片,但手機板以上就會成橫幅的排版,這時候就可以看得出來此彈性的優勢別於元件型框架的差別。可以自由地做成任何想要的排版,我覺得這部份真的非常棒,不用受限於元件庫的限制了。

想要做卡片、彈窗,還是其他常見的元件,似乎都可以透過 Utility-First 來完成。

不需要針對手機板使用斷點

有提到 Tailwind 是手機優先開始撰寫,所以手機板不需要使用前綴詞,不要誤用 sm 是手機螢幕大小,sm 的預設斷點為 640px 喔!官方範例為:

<div class="sm:text-center"></div>

正確的寫法為:

<div class="text-center sm:text-left">這是一段文字</div>

上方的寫法意思是,在手機板的時候文字居中,解析度 640px 以上時,文字靠左。

demo: https://codepen.io/hnzxewqw/pen/PopdRvr

單一斷點導向

Tailwind 的斷點只有 min-width,沒有 max-width ,這代表我都是要從手機板出發來寫斷點,如果我只想在某個元素使用斷點,我只需要在更大的斷點上寫我要的內容,就會覆蓋前一個斷點的內容,比如說下方範例:

demo: https://codepen.io/hnzxewqw/pen/PopdRvr
我有一個方塊,在手機板的時候要靠左,並且是蜜桃色的,但隨著螢幕尺寸的變化,會慢慢變成不同的顏色,甚至到最大的斷點時,可以設定讓方塊靠右對齊。

透過斷點達到想呈現的效果就是這麼容易。

客製化斷點

Tailwind 的優點就是可以自由的客製化,假如預設的斷點比較不符專案使用,也可以透過 tailwind.config.js 去設定想要的斷點喔!斷點的前綴詞可以自訂義。

// 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) { ... }
    },
  }
}

參考資料


上一篇
TailwindCSS 從零開始 - 每個 Utility class 都支援響應式與偽類
下一篇
TailwindCSS 從零開始 - 增加 Base 樣式
系列文
TailwindCSS - 從零開始30

1 則留言

0
jason06286
iT邦新手 5 級 ‧ 2021-10-04 11:24:08

https://ithelp.ithome.com.tw/upload/images/20211004/20124879DrULsvaPIE.png
這裡好像是 64px、128px、256px,
哈哈 用了 tailwind 心中都會默默乘四

Tim Hsu iT邦新手 4 級 ‧ 2021-10-04 15:39:43 檢舉

感謝通知,盡快修改!

我要留言

立即登入留言