# 第三週作業攻略講解 - RWD 網站

:::info
**【來源】** <https://discord.com/channels/801807326054055996/1133639911170379836/1133639911170379836>
:::

---

[TOC]

---

:::info
第三週設計稿： [https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/specs/](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/specs/ "https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/specs/")
:::

在開始之前，記得我們的網頁 head 內要有以下設定，才能開始寫響應式網頁唷

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

---

## Adobe XD 設計稿的格線

首先我們打開 Adobe XD 的設計稿，右方側欄有 Grid layout 的設定，打開網格，就可以看到網頁的元素排列。空間的分配，大多依靠著格線（Grid layout），總共有 12 欄。



在這共 12 欄的空間中，每個元素都占了不同的欄寬。
我們後面會依據欄寬，來做出寬度不同的「擺放元素用的容器」。


:::success
小知識 ：
col 是欄的英文 column 的縮寫。
:::

---

### 響應式的排版

我們之後寫網頁，可以依據欄寬的比例，來使用 CSS 做出不同寬度的容器。

如果使用固定的 px 單位來做為欄寬的話，網頁會比較沒有彈性。

當 container 的寬度設定有變動時（例如 container 因某種原因而需要增加寬度…），使用固定的 px 單位的元素，就有導致跑版的可能。

所以我們需要使用 % 這個單位來做出欄寬。
我們可以依照欄寬比例，來計算每欄占的 % 數。

1 欄為 12 分之 1， 1 / 12 = 8.333%
2 欄為 12 分之 2， 2 / 12 = 16.333%

---

#### 計算出 .col-1 ~ .col-12 的 width

範例：

.col-1 {
  width: 8.333%;
}
.col-2 {
  width: 16.666%;
}
.col-3 {
  width: 25%;
}
// 依此類推...
.col-12 {
  width: 100%;
}

這樣我們就依據了欄寬比例做出了排版用的容器囉。

---

#### 響應式排版製作 gutter

:::success
同學可能會提問，如果我直接使用算比例的方式來寫，元素之間的 gutter 怎麼辦？


:::

由於 col 之間沒有間距，我們可以在 col 上加上左右 padding 來製造這個留白間距。

---

#### 利用 padding 推出元素的水平間距

為了讓元素之間產生間距（gutter），可以在 col 的結構左右加上 padding，col 間距就會從兩個 padding 產生出來：


.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

這樣一來，元素 A 和元素 B 的間距就會符合 gutter 數值 24px。

同學應該有發現，那 container 內容的最左邊和最右邊，視覺上的留白會變成 24px，這樣子不就太寬了嗎？最外面的 padding 數值不是要是 gutter 的二分之一（12px）嗎？

沒錯，所以我們必須要把它「減回去」。

如何減回去，讓 container 左右留白變為 12px ？

---

### row 結構的妙用

我們現在，要在 container 和 col 之間新增一層 div 結構。

該結構我們可以稱為「 row」。

.row {
  margin-left: -12px;
  margin-right: -12px;
  display: flex;
}

範例結構會像這個樣子：

<div class="container">
  <div class="row flex-wrap">
    <div class="col-3 px-3">
      <div class="box">3 欄寬</div>
    </div>
    <div class="col-3 px-3">
      <div class="box">3 欄寬</div>
    </div>
    <div class="col-6 px-3">
      <div class="box">6 欄寬</div>
    </div>
  </div>
</div>

:::info
範例程式碼：
https://codepen.io/izumi-dev/pen/bGQaMgG
:::

同學就可以看到我們順利用 padding 搭配負值 margin 來製造出元素間的間距囉。

---

#### row、col 以及響應式 media query 的搭配範例

現在，我們已經稍微了解使用 row、col 排版的概念，可以開始嘗試，搭配斷點來做響應式排版的變化。

:::info
範例：
[flex 排版 - 第三週設計稿響應式範例( padding + border-box ) - 排版範例 (codepen.io)](https://codepen.io/izumi-dev/pen/YzRYWyQ)
:::

要記得 media 的設定，要放在後方，這樣子才能依照斷點的變化來覆蓋原本的樣式。

範例：

/* 放在後方 */
@media (max-width: 768px) {
  /* 768px 以下時變 6 欄 */
  /* md 是 middle，在這裡是示意為平板寬度 */
  .col-md-6 {
    width: 50%;
  }
  
  /* 768px 以下時變 12 欄 */
  .col-md-12 {
    width: 100%;
  }
  
  /* 768px 以下時加入 margin-bottom: 24px;，讓垂直排列的元素間隔 24px */
  .mb-md-6 {
    margin-bottom: 24px;
  }
}

首頁有幾個區塊，是依照格線來排、變化版型，就可以按照上方說明的方式來切版看看。


:::info
（「聯名設計鏡框」的排版可參考 https://codepen.io/izumi-dev/pen/YzRYWyQ 的 hr 標籤下方的範例。）
:::

---

### 複習 container 的計算以及 container 的 RWD 設定

- 桌機版 container：

依照第一週計算 container 的方法，我們可以得知在桌機版的時候， container 會是以下設定：

.container {
  max-width: 1296px;
  margin: 0 auto;
}

現在，有個重點來囉

我們要請同學幫 container ，增加左右邊的一些留白。
讓裝置的螢幕比較窄的時候，網頁的內容比較不會太貼近邊緣。

左右邊的 padding 值通常會設定為 gutter 的一半。

也就是說，假如設計稿上 gutter 的數值為 24，那 container 的左右 padding 就可以設定 12px。

而又因為，我們有使用 border-box 來維持盒模型的寬度，所以 max-width 會需要再將 padding 的值給加回來。

也就是會像這個樣子：

.container {
  /* 1296 + 12 + 12 = 1320 ，這樣子 container 內層能容納的最大寬度才會是 1296px */
  max-width: 1320px;
  margin: 0 auto;
  /* 左右 padding */
  padding: 0 12px;
}

container 的 RWD 可參考以下設定：

/* 桌機 */
.container {
  /* 1296 + 24 = 1320*/
  max-width: 1320px;
  margin: 0 auto;
  /* 左右 padding */
  padding: 0 12px;
}

- margin: 0 auto;、左右 padding 是重複的樣式，不需要再寫一次 不同斷點的 container 的 max-width 可點擊元素來看寬度，並且再加上左右 padding 值：


/* 平板 */
@media (max-width: 768px) {
  .container{        
    max-width: 720px; /* (696 + 24 gutter) */
  }
}

/* 手機 */
@media (max-width: 375px) {
  .container{
    max-width: 372px; /* (348 + 24 gutter) */
  }
}

/* 也可以寫在一起 */
.container {
  /* 桌機 */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
  
  /* 平板 */
  @media (max-width: 768px) {
    max-width: 720px;
  }
  
  /* 手機 */
  @media (max-width: 375px) {
    max-width: 372px;
  }
}

補充：

- 或是可以參考看看 Bootstrap 的斷點來寫 @media
https://bootstrap5.hexschool.com/docs/5.1/layout/breakpoints/
https://bootstrap5.hexschool.com/docs/5.1/layout/containers/#how-they-work

- 建議 container 這個 class 只要有 max-width、水平置中用的 margin、左右 padding 就好，不要再加入其他的樣式。讓 container 這個 class 單純作為一個容器來使用。

有需要加入其他樣式的話，建議另外寫 class 來套用。

範例：

<div class="container mt-40 bg-black">...</div>

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
}

.mt-40 {
  margin-top: 160px;
}

.bg-black {
  background-color: #000000;
}

---

### 圖片的響應式設計

關於圖片的響應式設計，切記不要直接使用 width: 100%;，width: 100% 會讓圖片隨著外層容器變寬而被強制撐開，就會導致圖片變模糊。

要使用 max-width: 100%; ，才能維持圖片本身的最大寬度。

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

---

## 第三週版型攻略

接著助教會帶同學來看看設計稿首頁：nav 和表單的排版結構。

### nav 區塊


- 由於屬於導覽列的功能，所以可以用導覽語意的 nav 標籤製作該區塊。
- 最外圍是滿版，所以 container 要放在 nav 下一層。
- 左方 logo 的 img 圖片可以用 a 標籤包住，因為 logo 通常會是點擊後回首頁的連結。

假如首頁名稱是 index.html，可以寫成 `<a href="index.html">…</a>`

- 右方則屬於連結列表，可使用 ul \> li \> a 的結構來撰寫。

- 需注意的點是，每個連結之間的水平空間，建議在 a 標籤使用 padding 來推出間距，這樣 a 標籤的點擊範圍就可以被擴大，優化使用者體驗。

- nav 區塊，當螢幕變為平板寬度（768px）時，可以先讓排版變成設計稿手機版的樣式，內層元素才比較不會擠在一起。

HTML 範例結構：

<!-- .bg-primary 代表背景色主色的 CSS background-color: #aa0601; -->
<nav class="navbar bg-primary">
  <div class="container navbar-wrap">
    <a class="navbar-logo" href="#">
      <img src="..." alt="logo">
    </a>
    <ul class="navbar-nav">
      <li class="navbar-item"><a class="navbar-link" href="#">系列鏡框</a></li>
      ...
    </ul>
  </div>
</nav>

:::info
第三週 nav RWD 範例
https://codepen.io/izumi-dev/pen/mdQxyeL
:::

---

### 表單區塊

表單區塊的重點：

- 表單可以用 form 標籤。
- 使用 label 標籤搭配屬性 for，當文字被點擊後，對應的 input 可以被 focus，增加使用者體驗。 label 的 for 屬性的值，對應到 input 的 id 的值。

（補充：**id 須為唯一值**，同一頁不得出現重複的 id，不然 label for 會無法產生對應） 範例：

<label for="name">
  姓名
</label>
<input id="name" type="text">

- 表單 input 的 type 屬性不只有 text，有用於 email 的 `type="email"`、用於電話的 `type="tel"`等等不同種類 type。

:::info
第三週 表單 RWD 範例
https://codepen.io/izumi-dev/pen/RwqMPrm
:::

---

## 總結

### 製作出 RWD 的方式

- 網頁 head 內要有以下設定，才能開始寫響應式網頁

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

- 使用 @media 做出響應式調整，@media 的內容，要放在原本寫的 CSS 樣式的後方，才能覆蓋掉原本的 CSS

- 運用 .container、.row、.col 的不同欄寬比例，來佈局網頁元素，做出響應式排版

---

### 推薦的寫法

- 剛開始寫 RWD 的同學，建議完成一個區塊的桌機、平板、手機後，再繼續寫下一個區塊。這樣子思路上會比較清晰。

今天的布局概念會需要花一些時間來吸收觀念~ 同學可以多看看範例的布局方式來加深印象。 那麼第三週的文字直播就到這裡哩， 祝同學都能順利地完成第三週主線o(°▽°)o！

---

{%hackmd RAtn1iEBRO2tCbZeA-NylQ %}

---