---
tags: 公益程式體驗營 - 2022
---

# 第三週 - RWD 一點都不難，手把手打造手機版網頁

## 開課提醒
1. 錄影
2. 不需報到
3. 講解[主線任務](https://rpg.hexschool.com/training/29/task)
4. 講解[小組任務](https://hackmd.io/dy9Sj_qJQ1uZ8a9LJXNsgQ?view)
5. 響應式
- 秘密一：meta 語法
- 秘密二：外容器與內容器寬度設定
- 秘密三：透過斷點控制樣式的變化

## 響應式介紹

- 手機、平板、桌機等尺寸都能兼容的網頁
- 響應式語法設定

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

- Media Queries

    @media(條件){樣式} 

滿足條件則會開啟樣式

## CSS 覆蓋
- CSS 覆蓋

題目一：

    <h1 class="title">...</h1>

    .title {
      color: red;
    }

    .title {
      color: blue;
    }

題目二：

    <h1 class="title title2">...</h1>

    <h1 class="title2 title">...</h1>

    .title {
      color: red;
    }

    .title2 {
      color: blue;
    }

- 先看權重，再看先後
html tag 1 分
class 10 分
id 100 分
inline style 1000 分
!important 10000 分

題目一：

    <div id="color-id" class="color-class">Color</div>

    .color-class { 
	    color: blue;
	}
	#color-id { 
	    color: red; 
	}

	div {
	    color: yellow; 
	}

題目二：600px 時文字顏色

    <div id="color-id" class="color-class">Color</div>

    @media (max-width: 768px){
	    #color-id { 
		color: black;
	    }
    }

    @media (max-width: 576px){
	    .color-class { 
		color: red;
	    }
    }

    div { 
     color: yellow; 
    }

## 斷點

下面是 2022 年市場上常用的移動裝置和電腦螢幕解析度的分佈情況，不同品牌和型號的裝置螢幕解析度都不一樣

常使用的斷點：

1280
992
768
576
414
375

## 中場休息 - 好康分享
1. 6/2(四) 21:00 將提供體驗營專屬，3 小時快閃優惠，想獲得更多前端技能，請預約 [Line 提醒](https://r.botbonnie.com/UF8u3)
2. [團戰任務](https://courses.hexschool.com/courses/d9be03/lectures/40179618)來惹！

## container 與內容器

- container
- 容器。通常我們網頁主要的內容都會放在 container 裡面，是為了視覺上的瀏覽可以專注在網頁中心。

        .container {
          max-width: 1120px;
          margin: 0 auto;
          padding-left: 16px;
          padding-right: 16px;
        }

- 內容器
- 寬度單位使用 %
- 斷點搭配寬度設定

        .item {
	        width: 50%;
        }

        @media (max-width: 768px) {
	        .item {
		        width: 100%
	        }
        }

- 實作範例：[範例程式碼](https://codepen.io/AliceChiang/pen/ExQwgeN)
四個一排
<img src="https://i.imgur.com/u0VXUhD.png">
兩個一排
<img src="https://i.imgur.com/Ko2FoQZ.png">
一個一排
<img src="https://i.imgur.com/Mdw0nOi.png">

## 觀念分享

- 不能出現 x 軸！（有 x 軸會退作業）
- 不能將內容器寫死寬度 (px)
- 總複習：[日本麥當當](https://www.mcdonalds.co.jp/menu/)、[星巴克](https://www.starbucks.com.tw/products/drinks.jspx)

## 證書任務二講解
* 版型規劃
* 規劃流程
* 建議先不要做 header 和 footer 區塊
* 可以不用做出圓點＋好評如潮區塊可不需要點點點的切換樣式
* 實作「三大平台，我來搞定」區塊
* 常見問題的文案
- Q1.我要怎麼變更方案？
請聯絡您的業務專員修改訂閱方案，我們將為您進行變更流程。
- Q2.如果我沒有LINE官方帳號怎麼辦？
沒關係的，只要您是我們任何一個方案的夥伴，我們的專員可以協助辦理哦！

- 設計稿網址：https://xd.adobe.com/view/4922398e-1a6e-4d4b-848c-044a079713bb-1c71/screen/cb9d2488-08ba-4589-98ad-eecdb84dcb93/specs/

## 表單填寫

[2022 公益體驗營 - RWD](https://docs.google.com/forms/d/e/1FAIpQLSezz3-MqpwQPh3QGiwMOFw_9YCdf-aIcweGezW1B8QBU2JQqw/viewform)