iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

TailwindCSS - 從零開始系列 第 6

TailwindCSS 從零開始 - 每個 Utility class 都支援響應式與偽類

tailwindcss

手刻響應式網站,對我來說其實沒有到很困難,但如果頁面一多,時程又趕,就會很麻煩,而 Tailwind 有一個令人心動的特點就是,所有的 Utility class 都支援響應式。

怎麼寫響應式斷點

手刻響應式會使用下面的方式撰寫:

@media query(max-width:XXXpx){
/** 響應式內容 */
}

甚至後來學 SCSS 的時候因為懶惰就另外寫了一個元件,每次只要引入元件,在使用 @include 想要的尺寸就好,可是前端的世界沒這麼好過,看看現在手機已經都快不像手機,都跟小電視一樣,尺寸亂七八糟什麼都有,各家手機也都規則不一。

使用 bootstrap 設定響應式

後來學了 Bootstrap 後,算是在響應式有得到一點救贖,只在響應式不用去想斷點,只要專心切板就好,我最常用的就是惱人的 table 了。

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

個人覺得 table 的部分算是已經夠好用了,也算是清楚,但還是要相依在該規範中。

其他元件就要整個元件程式碼完整架構,如:卡片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

可以看到又出現跟之前說明的狀況一樣,因為 Bootstrap 是以定義好的元件方式載入畫面,所以會需要依賴該框架的元件定義,才能完整呈現想要的畫面。

如果要多張卡片呈現在畫面的時候,就變成要外面再包更多的標籤。

   <div class="row">
        <div class="col-md-3">
            ...
        </div>
    </div>

如果畫面單純就還好,可是如果今天畫面越來越複雜的時候,在維護時光是找標籤收尾可能都滿難找到的。

Tailwind 是手機優先斷點寫法

跟 Bootstrap 一樣是從手機優先來規劃斷點的,以卡片為例,今天透過 Utility-first 的方式來撰寫三張卡片並排且加入斷點。Tailwind 不需要相依在元件之下,就可以寫出卡片效果以及斷點。

rwd

官方也提供明確的斷點寫法,只要在想要做斷點的前面加上斷點縮寫即可,例如:

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

是不是跟 Bootstrap 有異曲同工之妙,但是我只要加在想要的 element 上面就好了,也不用加了很多 .row.col

偽類也是一樣的方法

通常我們想要按鈕有點互動效果,一般 CSS 也會寫成:

h1{
  color: red;
}

h1:hover{
  color: blue;
}

但我使用 Tailwind 就只要寫成

<h1 class="text-red-500 hover:text-blue-500">this is title</h1>

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

直觀又好理解!

不只 hover,還有像是 focus、active...等。更多可以參考文件

最後綜合一個響應式卡片與有偽類效果的練習

點選右側的 codepen 可以看見響應式的效果喔!

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

參考資料


上一篇
TailwindCSS 從零開始 - CSS 傳統撰寫方式與功能優先的差異
下一篇
TailwindCSS 從零開始 - 手機到桌上螢幕,所有的元素都能自適應
系列文
TailwindCSS - 從零開始30

尚未有邦友留言

立即登入留言