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

# 響應式網頁設計 [範例程式碼下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing)
## 課前資訊

* **記得錄影記得錄影記得錄影 (講三次**
* [報到](https://rpg.hexschool.com/training/21/calendar) Code：`TWnEA8F1yqlF`
* [Gulp 部署網站流程](https://courses.hexschool.com/courses/2020112/lectures/33575267)已上傳
* 新服務上線- 校長午餐除BUG： 7/19(一)、7/21(三)、7/22(四)
* 每天早上九點分享 Slack 排隊報到區
* 中午 12~1 點開 ZOOM，一一協助報到成員 Debug！

## kata 排名(14:00 更新)

第一名：10位：13 組
第二名：8 位：18、22 組
第三名：7 位：12 組
第四名：6 位：4、7、11、24 組
第五名：5 位：3、14、16、20 組
第六名：4 位：1、2、8、9、15、17 組
1~3 位：5、19、21、10、23、6、25

## 環境建立(以下 no 編號為範例程式碼編號)

* viewport 設定 (no.1)

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

* CSS media Queries 語法 (no.2)

## 權重覆蓋遊戲

* HTML 標籤：1 分
* class 選擇器：10 分
* ID 選擇器：100 分
* inline style：1000 分
* !important：10000 分

## 寬度與單位配置

* max-width：運用在 圖片與 HTML 標籤上(no.3)
* % 單位的運用 (no.4)、box-sizing 講解
* max-width 與 % 的運用 (no.5)

## 排版細節

* 三欄排版 (no.6)
* 三欄圖文排版 (no.7)
* 完整版型設計(no.8)

## RWD 網站分享
* [Apple](https://www.apple.com/tw/)
* [Mac](https://www.apple.com/tw/mac/)
* [medium](https://medium.com/)
* [日本麥當勞](https://www.mcdonalds.co.jp/)
* [IT 邦幫忙](https://ithelp.ithome.com.tw/)
* [https://roov.jp/](https://roov.jp/)
* [https://ippukuandmatcha.jp/](https://ippukuandmatcha.jp/)
* [https://www.frontage.jp/](https://www.frontage.jp/)
* [taiwan can help](https://taiwancanhelp.us/)

## 斷點規劃+大網站設計範例

* PC - 1200px
* iPad - **768px**
* iPad以下 - **767px**
* iPhone 6 Plus - **414px (視專案族群)**
* iPhone 6 - **375px (視專案族群)**
* iPhone 5、SE - **320px**

有學生應該會很好奇，
為什麼 還會有一個 767px 的斷點，
因為通常 iPad 直式 是 Android、IOS 平版很常見的大小，
再接著 767px~320px 我便會視為他們都是手機 size，
所以在 767 px 以下時就會直接把他變成手機版型，
畢竟 767px~6xx size 相當少見，一開始各位學生可以先確保一些熱門斷點上優化即可，
至少可以滿足 80% 以上的客戶，
不用太吹毛求疵，當然你力求優化的話也是 ok 的。

再來 320px 是你最小需要注意的 SIZE，
現在仍然有許多手機是 320px，尤其是小 size 的 iPhone，
以前甚至有 240px 的手機，但現在已經相當稀有了。

* 所以如果是 PC 做到手機的話，語法就會有點像是這樣：

.wrap{
  max-width: 960px;
}
.header {
  height: 80px;
}
.list li{
  width: 33%;
}
.list h3{
  font-size: 24px;
}
@media(max-width: 768px){
  .header{
    height: auto;
  }
  .list li{
    width: 48%;
    margin: 0 1%;
  }
}
@media(max-width: 767px){
  .list li{
    width: 98%;
  }
}
@media(max-width: 414px){
  .list li{
    font-size: 18px;
  }
}

## 影音觀念補充

* [動線設計：並非所有內容都要全部塞到網頁內容](https://courses.hexschool.com/courses/670051/lectures/11953526)
* [斷點時機：設計多欄式佈局的必要觀念](https://courses.hexschool.com/courses/670051/lectures/11953528)
* [點擊範圍：設計讓人好點選的元素](https://courses.hexschool.com/courses/670051/lectures/11953530)
* [少即是多：避免資訊量爆炸](https://courses.hexschool.com/courses/670051/lectures/11953532)
* [斷點元素：只有手機才會顯示的功能與Layout切換](https://courses.hexschool.com/courses/670051/lectures/11953535)

## 叮嚀

* 網頁有 x 軸，有的話會被釘在牆壁上

## 第三週主線任務

* <a href="https://rpg.hexschool.com/training/21/task?type=detail&id=205" target="_top">第三週 - 眼鏡形象網站</a>

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **week3 資料夾**，網址如下，其他以此類推：
* https://hexschool.github.io/webLayoutTraining1st/week1/photo.png
* https://hexschool.github.io/webLayoutTraining1st/week1/line.svg
*
>補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)

## 作業等級表
1. LV1：只做 header 與 footer 的 RWD
2. LV2：任選一頁，僅做 PC 版型
3. LV3：任選一頁，需含RWD
4. LV4：做二~三頁以上的 RWD
5. LV5：所有頁面都有設計