此系列文章已改編成書,歡迎購買:https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw
手刻響應式網站,對我來說其實沒有到很困難,但如果頁面一多,時程又趕,就會很麻煩,而 Tailwind 有一個令人心動的特點就是,所有的 Utility class 都支援響應式。
手刻響應式會使用下面的方式撰寫:
@media query(max-width:XXXpx){
/** 響應式內容 */
}
甚至後來學 SCSS 的時候因為懶惰就另外寫了一個元件,每次只要引入元件,在使用 @include 想要的尺寸就好,可是前端的世界沒這麼好過,看看現在手機已經都快不像手機,都跟小電視一樣,尺寸亂七八糟什麼都有,各家手機也都規則不一。
後來學了 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>
如果畫面單純就還好,可是如果今天畫面越來越複雜的時候,在維護時光是找標籤收尾可能都滿難找到的。
跟 Bootstrap 一樣是從手機優先來規劃斷點的,以卡片為例,今天透過 Utility-first 的方式來撰寫三張卡片並排且加入斷點。Tailwind 不需要相依在元件之下,就可以寫出卡片效果以及斷點。
官方也提供明確的斷點寫法,只要在想要做斷點的前面加上斷點縮寫即可,例如:
<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