---
tags: 網頁切版直播班 - 2022 夏季班
---

# 簡單的響應式設定，實現三階段變身
1. 錄影
2. 響應式
5. 介紹[第三週上課練習作品](https://codepen.io/AliceChiang/pen/jOzWvEW?editors=1010)（僅供參考樣式）

## 響應式

- 秘密一：meta語法
- 秘密二：**透過斷點控制樣式的變化**
- 秘密三：容器寬度設定做到自適應網頁寬度

## 手刻 vs. Tailwind 斷點寫法
手刻：

  <img class="w-12 w-8 w-4" src="https://lh5.googleusercontent.com/-HxdAXDevCOM/AAAAAAAAAAI/AAAAAAAAAGE/kpIzybNcc9o/photo.jpg">

  .w-12 {
    width: 12rem;  /* 192px */
  }

  @media (max-width: 1024px){
	.w-8 {
	  width: 8rem; /* 128px */
	}
  }

  @media (max-width: 768px){
	.w-4 {
      width: 4rem; /* 64px */
	}
  }

Tailwind：
- 不用自己寫斷點，只需使用前綴

  <img class="w-16 md:w-32 lg:w-48" src="https://lh5.googleusercontent.com/-HxdAXDevCOM/AAAAAAAAAAI/AAAAAAAAAGE/kpIzybNcc9o/photo.jpg">

編譯結果

  .w-16 {
    width: 4rem;
  }

  @media (min-width: 768px)
    .md\:w-32 {
      width: 8rem;
  }

  @media (min-width: 1024px)
    .lg\:w-48 {
     width: 12rem;
  }

## Tailwind 響應式設計
### Mobile First (手機優先設計) 與 min-width

Tailwind 的斷點設計是依照 Mobile First
通常會在 Mobile First 的概念下使用 min-width 的語法來進行響應式的開發

`@media (min-width: 768px) { ... }` → 最小 768px 寬

min-width 與 max-width 寫法差異：

min-width: 數字由小往大撰寫

@media (min-width: 768px) { ... } 
@media (min-width: 1024px) { ... } 

max-width: 數字由大往小撰寫

@media (max-width: 1024px) { ... } 
@media (max-width: 768px) { ... } 

### [Tailwind 斷點](https://tailwindcss.com/docs/responsive-design)
斷點：決定樣式什麼時候要改變的數字

`斷點：樣式`

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

  如果 md 尺寸還要設定高度：
  <img class="w-16 md:w-32 md:h-32 lg:w-48" src="...">

[Mobile First 注意事項](https://tailwindcss.com/docs/responsive-design#mobile-first)

## 中場休息
中場休息～～～～～～

## [客製化斷點](https://tailwindcss.com/docs/screens)
- 可以依目前的新增，例如：3xl
- 可以改斷點數值
- 可以改為 max-width
- 可以將斷點名稱重新命名

## [客製化 container](https://tailwindcss.com/docs/container#customizing)

module.exports = {
  theme: {
    container: {
      center: true, // 水平置中
      padding: '2rem', // 水平間距
    },
  },
}

## [JIT](https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css)
- Just In Time 即時編譯
- Tailwind version 3 預設模式
- 優點：
- 編譯速度飛快 3-8 秒（原本整包 CSS 需要 30 秒）
- 每個 class 都可以使用前綴
- 可編譯自己創造的 css：m-[21px]
- dev 和 prod 的環境的 CSS 編譯是相同的
- 效能更好

## Live Demo 主題作品
練習主題：Tailwind 響應式，以第三週設計稿的 Navbar 為例

桌機版：

手機版：

## 週末任務說明
製作 Footer 響應式版型：https://hackmd.io/zdrB8RHMRsiH0sNq0CRxJg

## 重點複習
- 重點複習
- 預告下週內容
Gulp 搭配使用 Tailwind
[專案下載連結](https://github.com/hexschool/web-layout-training-gulp/tree/feature/tailwind)
[使用手冊連結](https://hackmd.io/UFgAadfSTf6L0sqXJvCV8g)
- 表單！
https://docs.google.com/forms/d/e/1FAIpQLSei9oss5VOVWSC20eTor514YBX4Rejy3TbgRIuQy--N9wP_eQ/viewform