---
tags: 公益程式體驗營 - 2022
---
# 🏅 5/18(三) 每日切版任務 - RWD 觀念補給
## 題目
請回答關於 RWD 的三題問答題：
### 第一題
請說明 Mobile First 設計與 Desktop First 設計分別是什麼意思？
### 第二題
請問下方代碼這種寫法是屬於 Mobile First 設計還是 Desktop First 設計？
```css=
.item{
width: 100%;
}
@media (min-width: 768px) {
.item{
width: 50%;
}
}
@media (min-width: 1440px) {
.item{
width: 25%;
}
}
```
### 第三題
請問當螢幕寬度小於 414px 時 content 寬度為多少？為什麼？
```htmlembedded=
<!-- HTML -->
<body>
<div class="content"></div>
</body>
```
```css=
/* CSS */
.content{
width: 25%;
margin: 10px;
}
@media (max-width: 414px) {
.content{
width: 100%;
}
}
@media (max-width: 768px) {
.content{
width: 50%;
}
}
```
<!--
ans:
第一題：
手機優先設計從最小寬度開始設計，一開始直接寫的是手機版，往後是 @media (min-width: 768px){...}、@media (min-width: 1024px){...} 這種逐漸往大螢幕設計的順序。
桌機優先設計從最大寬度開始設計，一開始直接寫的是桌機版，往後是 @media (max-width: 768px){...}、@media (max-width: 414px){...} 這種逐漸往小螢幕設計的順序。
第二題：
手機優先，因為他是從最小寬度開始設計的。
第三題：
ＣＳＳ的順序是後面會覆蓋前面的，所以手機版已經被平板尺寸的樣式覆蓋掉，不管是平板還是手機版都會顯示 50％ 寬度。
-->
---
## 回報流程
1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）
<!-- 解答： -->
回報區
---
<!-- 1. Bruno Yu
A1. RWD響應式網頁設計，為確保網頁在小螢幕到大螢幕(Mobile First)或大螢幕到小螢幕(Desktop First) 都能正常呈現
A2.Mobile First
A3. 50% 因為CSS權重問題，而現在訂定是必須小於最大寬度768px，所以小於這地都符合
-->
<!-- 2. CloThEs
Codepen：https://codepen.io/bogwdnxx-the-sans/pen/KKQWRoW
-->
<!-- 3.IreneLee
1.Mobile First:由小至大 Desktop First:由大至小
2.Mobile First
3.50%，因為css順序是後面會覆蓋前面的
-->
<!-- 4.yunyun
1.Mobile First:
以小螢幕先寫，再寫到大螢幕
Desktop First:
以大螢幕先寫，再寫到小螢幕
2.Mobile First
3.50%
-->
<!-- 5.Chi
1.
設計:
Mobile First: 先思考行動裝置的介面長什麼樣，先放入最重要的資訊，在設計大尺寸時再加較不重要的東西進去。
Desktop First: 先思考電腦的介面長什麼樣，在設計小尺寸時再把較不重要的元素隱藏。
程式:
Mobile First: 在寫 RWD 時從行動版開始，media query 使用 min-width，media query 尺寸排序由小到大。
Desktop First: 在寫 RWD 時從電腦版開始，media query 使用 max-width，media query 尺寸排序由大到小。
2. Mobile First
3. 50%， css 被後面的蓋掉了
-->
<!-- 6. yuyu#6310
1. Mobile First: 設計時以手機版(小螢幕)優先, CSS順序由小螢幕到大螢幕,使用min-width
Desktop First: 設計時以電腦版(大螢幕)優先, CSS順序由大螢幕到小螢幕,使用max-width
2. Mobile First
3. width: 50%;,滿足兩個max-width,兩段CSS都會開啟,後面的會覆蓋前面,所以是50%
-->
<!-- 7. hw#0715
1. Mobile First: 手機端優先，小到大 / Desktop First: 桌機端優先，大到小，但如果螢幕是1280，1920或以上的尺寸能用模擬器看嗎?
2. Mobile First
3. 50%，後面的 max-width 覆蓋前者
-->
<!-- 8. Katie
1:手機優先設計是先從小螢幕開始設計，再往後依平板>桌機尺寸設計
桌機尺寸優先，則是相反，先設計桌面版的樣式，再隨著平板>手機尺寸調整。
2:Mobile First 設計
3.50%，同時吃到兩個max-width的設定，但因為CSS是後面的會覆蓋前面，所以以768px的設定呈現
-->
<!-- 9. hsiuhsiu
1. Mobile First 設計是由手機版小尺寸往大尺寸方向設計，Desktop First 設計是由電腦版大尺寸往小尺寸方向設計
2. Mobile First 設計
3. 50%，因同時滿足@media (max-width: 414px) {}及@media (max-width: 768px) {}，故兩個相同class標籤會被後方覆蓋
-->
<!-- 10. Noy
1.先從手機板型開始切版/先從PC版型開始切版
2.Mobile First
3.為width:50%,當畫面<414px時皆會吃到max-width: 768px的設定，而後者設定覆蓋掉前者。
-->
<!-- 11. Stanley#3825
1. Mobile First 是從行動裝置思考，畫面從小到大延伸，Desktop First 是從桌機裝置開始思考，畫面從大到小延伸
2. Mobile First 設計
3. 寬度50%，因為權重的關係 @media (max-width:414px)尺寸會被覆蓋
-->
<!-- 12. 楓之聲#6945
1.
Mobile First 是以手機螢幕寬度來先做設計，Bootstrap5就是以手機寬度來先做設計
Desktop First 是以電腦螢幕寬度來做設計
2.Mobile First 設計
3.寬度為50%
因為768px覆蓋了414px
-->
<!-- 13. Mitour#0672
1. Mobile First 以手機設計為優先，畫面變大版面在跟著調整，原先一欄式變成兩欄、三欄。Desktop First 則反過來以桌機畫面優先設計。
2. Mobile First
3. 50%，因為CSS權重一樣的情況，就看先後
-->
<!-- 14. JustinLiu
1. Mobile First: 以行動裝置設計優先，版面由小到大
Desktop First: 以電腦優先，版面由大到小
2. Mobile First
3. 50%，因為max-width: 768px 會覆蓋掉前面的content
-->
<!-- 15. Peng
1. Mobile First--以行動裝置為優先，從小至大
Desktop First--以電腦螢幕為優先，從大至小
2. Mobile First
3. 50%
-->
<!-- 16. Tuhacrt#0008
1. Mobile First: 以行動裝置優先設計
Desktop First: 以電腦裝置優先設計
2. Mobile First
3. 50%
-->
<!-- 17.kuo
1.Mobile First-以行動裝置優先進行 (版面由小至大)
Desktop First-以電腦裝置優先進行 (版面由大至小)
2.Mobile First
3.50% (因為權重，後面的會蓋掉前面的樣式)
-->
<!-- 18. Hao#2485
1.Mobile First從行動版開始設計 行動→平板→PC
Desktop First 從桌機版開始設計 PC→平板→行動
2. Mobile First
3. 50%，
根據權重，後面code 會蓋掉前面的
所以蓋掉max-width: 414px
-->
<!-- . 眠瀾#8857
ans. 1. Mobile Fisrt: 從小螢幕設計至大螢
Desktop First: 從大螢幕設計至小螢幕
2. Mobile Fisrt
3. 寬度50%；因為此CSS為Desktop First，
加上權重關係，所以寬度為50%
-->
<!-- 20. RJRS#9430
1. Mobile First 是先設計小尺寸再往大尺寸調整，
Desktop First 是先設計電腦版大尺寸再往小尺寸調整
2. Mobile First 設計
3. 50%，被css較下方的@media (max-width: 768px) {}覆蓋
-->
<!-- 21. 安安你好你是誰#7416
1. Mobile First:
從手機的版型開始往上做至桌面板
Desktop First
從桌面的版型開始往下做至手機板
2. Mobile first
3. 50% 因為<414的同時也<768，而768在414後面，加上後面會覆蓋掉前面，於是寬度為50%
-->
<!-- 22. Vera#5592
1) Mobile First：手機優先設計，畫面由小到大調整設定。
Desktop First：桌面板優先設計，畫面由大到小調整到行動版。
2) Mobile First
3) width: 50%、因為符合兩個@media的條件設定，最後的設定會往前覆蓋。
-->
<!-- 23. Chaoci#2460
(1) Desktop First : 電腦畫面為設計優先，由大到小去調整為手畫面。
Mobile First: 手機畫面為設計起點，由小到大調整為電腦畫面。
(2) Ans: Mobile First
(3) 同時滿足兩個 @media 以後面的為主覆蓋前一個參數 故為50%-->
<!-- 24. han#9437
1. Mobile First: 以電腦畫面先設計，由大到小調整
Desktop First: 以手機畫面先設計，由小到大調整
2. Mobile First
3. 50%，因為max-width: 768px 會覆蓋掉前面的content
-->
<!-- 25. Chaco#2993
1. Mobile First: 先設計小螢幕（手機,平板）排版，在設計大螢幕排版
Desktop First: 先設計大螢幕排版，在設計小螢幕排版
2. Mobile First
3. 50%，max-width: 414px和max-width: 768px一樣都符合螢幕寬
度小於 414px的規定，和後面768px樣式會覆蓋前面414px的樣式-->
<!-- 25. andersonshen#4675
1. Mobile First: 行動優先
Desktop First: 桌機優先
2. 由小到大：Mobile First
3. `width: 50%;`，順序錯誤，`max-width: 414px` 跟 `max-width: 768px` 要反過來，不然按照權重，會變成永遠執行 `max-width: 414px`-->
<!-- 26.小不點#1793
1. Mobile First:先設計手機版面在設計桌機版面
Desktop First:先設計桌機版面在設計手機版面
2. Mobile First
3. width:100% 後面CSS覆蓋前面CSS
-->
<!-- 27.
A1：
Mobile First: 設計開版的螢幕尺寸以最適合手機觀看模式(由小到大)去做規劃
Desktop First: 設計開版的螢幕尺寸以最適合桌機觀看模式(由大到小)去做規劃
A2：
Mobile First
A3：
content寬度會為50%。
media jquery因爲權重關係，max-width: 768px寫在max-width: 414px之後，因此CSS會讀取到這個樣式，寬度就會是50%。
-->
<!-- 28. Tori#1287
1.
Mobile first: 由解析度小（手機）寫至解析度大（桌機）
Destop first: 由解析度大（桌機）寫至解析度小（手機）
2.
Mobile first
3.
207px
會先套用 @media (max-width: 414px) 裡的屬性，後續又被
@media (max-width: 768px)裡的屬性蓋過，故最後為414px的50%，為207px。
-->
<!-- 29. Cheng-Yu#1813
1.
Mobile first: 手機 => 桌機
Destop first: 桌機 => 手機
2.
@media(min-width: 768px) 螢幕>=768px 吃到效果
@media(min-width: 1440px) 螢幕>=1440px 吃到效果
小 => 大
所以是 Mobile first
3.
@media (max-width: 414px) 螢幕<=414px 吃到效果
@media (max-width: 768px) 螢幕<=768ox 吃到效果
當螢幕<=414px 上述兩個設定都會吃到 權重一樣看順序
content width:50%;
-->
<!-- 30. 白狐
第一題：先設計手機板畫面或事先設計桌面板畫面，牽扯到呈現體驗與資料大小、也與使用群體相關。
第二題：Mobile First。
第三題：50%，相同條件相同權重，後蓋前。
-->
<!-- 30. lyle#8123
1. Mobile First:從手機開始設計到PC
Desktop First:從PC開始設計到手機
2. Mobile First
3.50% 吃到寬768pxCSS,也有吃到寬414px兩個權重相同
CSS先後順序768px比較後面
-->
<!-- 31. Van.CS #2067
1. Mobile First 是從手機尺寸為基礎，斷點往上加
Desktop First 是從桌機尺寸為基礎，斷點往下加
2. Mobile First 的設計
3. 會吃到最後一個的權重 所以是 50%
-->
<!-- 32. bonnieli1414#4906
1. Mobile First 是手機尺寸優先
Desktop First是桌機尺寸優先
2. Mobile First
3. width: 50%; CSS先看權重，再看前後，寬度小於 414px 符合最後兩個條件，因權重一樣，以後者先。
-->
<!-- 33. WilliamChou#7375
1. Mobile First: 手機版優先、再將尺寸放大的電腦版 Desktop First: 電腦版優先，再將尺寸縮小到手機版
2.Mobile First
3.50% 背後者覆蓋掉
-->
<!-- 34. EG#7172
Q1：Mobile First - 手機優先，Desktop First - 電腦優先。
Q2：手機優先。
Q3：50%，先看權重後看順序。
-->
<!-- 35. Lina Chen
1. Mobile First 會先考量手機頁面的呈現，隨著螢幕尺寸變大再考量平板及桌機的畫面；Desktop First 則相反，先考量桌機畫面，隨著螢幕尺寸變小再考量平板或手機的呈現。
2. Mobile First
3. content 寬度為 50%，因為 css 前後順序，最後的 .content 樣式覆蓋前面的寬度設定。
-->
<!-- 36. RyanLu#3642
Q1：Mobile First - 以行動裝置優先，設計由小至大
Desktop First - 以桌機優先，設計由大至小
Q2：Mobile First。
Q3：50% 先看權重，之後看順序
-->
<!-- 37. Triple
1. Mobile First： 小到大，先設計手機的畫面呈現，再設計電腦的
Desktop First：大到小，先設計電腦的畫面呈現，再設計手機的
2. Mobile First
3. 50%，後面 768px 的權重較高-->
<!-- 38.yuling
1.Mobilefirst手機版優先:尺寸小至大
Desktop First桌機版優先:尺寸大至小
2.Mobilefirst，min-width:768px至1440px，判斷為由小至大。
3.CSS銓重問題，後面會覆蓋前面CSS，螢幕寬度小於414px時，content寬度為50% -->
<!-- 39.小鹿Kerwin#5730
1. Mobile First設計: 由尺寸小的css寫至大
Desktop First設計: 由尺寸大的css寫至小
2. Mobilefirst的設計
3. 50%，由於後面的覆蓋掉前面的設定 -->
<!-- 40. 黑松胖#4836
A1.
Mobile First：
設計內容由畫面尺寸較小的行動裝置寫至畫面尺寸較大之桌機模式
Desktop First:
設計內容由畫面尺寸較大之桌機模式寫至畫面尺寸較小的行動裝置
A2.Mobile First
A3.50%，414px同時符合max-width:414px與max-width:768px，兩CSS之權重相同，後者會覆蓋前者之設計，所以content之width為50%
<!-- 41. Joyce
1. Mobile First 以手機板為主，用 min-width 從寬度小寫到大
Desktop First 以電腦版為主，用 max-width 從寬度大寫到小
2. Mobile First
3. 50%，因為權重相同時，寫在後面的優先於前面
-->
<!-- 42.黑白兔#0684
1. Mobile First 以手機設計為優先，用min-width，畫面變大版面在跟著調整。Desktop First 則反過來，用max-width，以桌機畫面優先設計。
2. Mobile First
3. 50%，因為權重相同，以後面優先為主。
-->
<!-- 43.Jia-Hong Chen#3863
1.
Mobile First 沒有用 @media 包住的預設是寫給 mobile 的。
Desktop First 沒有用 @media 包住的預設是寫給 desltop 的。
2.
Mobile First。
3.
width: 50%; 因為 小於 414px 同時滿足 max-width 414px跟768px，以後面定義的為主。
-->
<!-- 44.amy芳#1385
1.Mobile First,手機優先介面
Desktop First,電腦桌機優先介面
2.Mobile First
3.50%,先看權重再看先後,權重相同,後者為重!
-->
<!-- 45.ling chang#1024
1. Mobile First- 以手機介面為優先 / Desktop First- 以桌機介面為優先
2. Mobile First
3. 50% 因權重相同, css順序由上至下讀取, @media (max-width: 768px) 寫在最後所以是50%.
-->
<!-- 46. Mojito#6002
1. Mobile first -> 從小（手機）的螢幕寬度開始設計
Desktop first -> 從大（電腦）的螢幕寬度開始設計
2. Mobile First -> min-width 從小的螢幕開始設計
3. 50% -> max-width: 414px 會被 768px的內容覆蓋
-->
<!-- 46. Josh Chen#4552
1. Mobile first:從小到大 Desktop first:從大到小
2. Mobile First
3. 50% 權重相同會被後者內容覆蓋
-->
<!-- 47. Eric.S
1. (1) Mobile first：寬度小的先設計，寬度大的之後，屬於移動端優先的設計。
(2) Desktop first：從寬度大的開始設計，之後往寬度小的螢幕，屬於桌機優先的設定。
2. Ans: Mobile first，題目中預設為小於寬度768px的樣式，再往大的寬度樣式設定，移動端優先。
3. Ans: 螢幕寬小於 414px 時width為 50%，題目中原width設定為25%，小於414px時為100%，小於768時為50%，當螢幕寬小於414px時，
三種樣式都會吃到，當權重皆相同時，會以最後的社頂為主，因此答案為 50%。
-->
<!-- 48.諾拉#4800
Ans 1:
Mobile First: 手機優先設計：CSS 樣式設計從手機版開始設計，再來平板，最後是電腦版。RWD CSS 部分會由手機版寫到桌機螢幕寬：@media screen(min-width: 768px){…}@media screen(min-width: 1024px){…}
Desktop First: 桌機優先設計：CSS 樣式設計從桌機版開始設計，再來平板，最後是手機版。RWD CSS 部分會由桌機版寫到手機螢幕寬：@media screen(max-width: 768px){…}@media screen(max-width: 414px){…}
Ans 2: Mobile First
Ans 3: width: 50%; 因為CSS 權重問題，當寫在越後面的樣式權重越大。手機版樣式被平板樣式覆蓋，所以不管手機版與平板樣式都會套用寬度50%。
-->
<!-- 49 Nini Chen#5790.
1.Mobile First 設計：是從最小寬度開始設計，先從手機板開始寫，才逐漸往大螢幕設計 ，Desktop First則反之。
2. Mobile First 設計，因為從最小寬度開始設計。
3.50%，因為CSS順序會後面覆蓋前面。
-->
<!-- 50. Vicky Chang#8846
1. Mobile First: 以手機介面為優先設計;
Desktop First: 以桌機介面為優先設計。
2. Mobile First
3. 50%，當寬度為414px，會吃到兩段max-width設定，但因後面的CSS權重較高，因此會覆蓋前者。
-->
<!-- 51. 小王
1. Mobile First: 手機介面為優先設計，從最小寬度開始，到平板，再到大螢幕設計，Desktop First 則反之。
2. Mobile First 設計: 因為是從最小寬度開始設計。
3. 50%，在相同的選擇器之下，後面的CSS會覆蓋掉前者。
-->
<!-- 52. skypassion5000#4151
Q1：Mobile First - 手機介面開始設計再來優化到電腦介面，Desktop First - 電腦介面開始設計再來優化到手機介面。
Q2：手機優先。
Q3：50%，先看權重後看順序，所以當兩個都符合時，看誰在最下面。
-->
<!-- 53. Lao#4012
1-1.Mobile First 設計: 手機優先，使用min-width撰寫，由小螢幕的手機寬度開始設計至大螢幕的桌機寬度。
1-2.Desktop First 設計:桌機優先，使用max-width撰寫，
由大螢幕的桌機寬度開始設計至小螢幕的手機寬度。
2. Mobile First
3. width: 50%，因為程式是由上往下執行，當螢幕寬度小於 414px時，@media (max-width: 768px)的條件會開啟，便會覆蓋掉前面的.content設定。
-->
<!-- 53. 鉦勝#8333
第一題
Mobile First
從手機版做到PC版
Desktop First
從PC版做到手機版
第二題
Mobile First
第三題
50%
css是先看權重，後看順序
畫面縮到768時是width50%
會覆蓋掉414px的100%設定
-->
<!-- 54.Ayre #0016
1.mobile first是由小螢幕至大螢幕
desktop first是由大螢幕至小螢幕
2.屬於desktop first設計
3.寬度為50%，因為權重關係後面會覆蓋前面
-->
<!-- 55 J_u_d_y#5993
第一題
Mobile First 會優先規劃行動裝置的內容(如：手機、平板)，規劃版面會由小寬度思考到大寬度。不僅只是把寬度做小，還需思考精簡設計的內容呈現，因為手機版面較窄小，選單會以漢堡選單呈現，把不需要立刻看到的內容給隱藏、收合起來，讓使用者優先看到其他更重要的大資訊。還要顧慮行動裝置多是以手指來操作，所以按鈕或表格的設計上得注意是否能讓人順利、有效地點擊。
Desktop First 會優先規劃電腦版的內容，版面規劃由大到小，比較是優先思考寬視窗的介面呈現，再往下去調整不同寬度斷點的佈局呈現變化方式。
第二題
Mobile First
第三題
寬度為50%。
因為當寬度小於414px這個條件時，會讓768px和414px的設定都打開，但是768px程式碼位置寫在比較後面，所以會覆蓋掉414px的設定。因此最終顯示寬度是50%。
-->
<!-- 56 Murmurline#6969
1. Mobile First: 從手機尺寸開始設計，CSS RWD 會由 Min-width 逐漸擴大。
Desktop First: 從桌面尺寸開始設計，CSS RWD 會由 Man-width 逐漸縮小。
2. Mobile First（因出現 Min-Width）
3. 權重問題，「後先於前」、明確優於大略所以是 50%
-->
<!-- 57 ajhappy#6488
第一題：
Mobile First 設計：
瀏覽網頁內容時，適應手機螢幕尺寸設計先決。
Desktop First 設計：
瀏覽網頁內容時，適應電腦螢幕尺寸設計先決。
第二題：
Mobile First 設計，因為@media (min-width: ...px)
第三題
為50%，因為權重的順序，後面會覆寫前面。
-->
<!-- 58 Easton#3863
1. Mobile First:先設計手機版面在設計桌機版面
Desktop First:先設計桌機版面在設計手機版面
2. Mobile First
3. width: 50%
-->
<!-- 59 SASIMI #5099
1.
Mobile First 設計是以行動裝置為優先考量，然後隨著寬度由小至大，CSS再逐步的修改至大螢幕；
Desktop First 設計則是以電腦桌機為優先考量，設計方式剛好與前者相反，寬度由大至小。
2.
寬度由小至大，min-width是該像素以上才可套用下方的渲染，故為 Mobile First
3.
max-width是該像素以下才可套用下方的渲染，而三個部分都開啟，而在後面蓋前面的規則下，width: 50% 適用
-->
<!-- 60 Raymond Lam#0344
1.
以使用者主要使用的介面尺寸來釐定，當中Mobile First 以移動裝置為設計考量，以小尺寸過度至大尺的螢幕來設定斷點，產生自動調整寬度及排版的效果；而 Desktop First則相反，此舉有助提高體驗。
2.
Mobile First
3.
寬度為50%，當寬度少於414時，兩個斷點都符合條件，但最底的斷點設定會覆蓋掉上方的設定。
-->
<!-- 61 Erica Chen#6929
第一題
Mobile First：手機優先設計
從小的版面設計到大的版面
Desktop First：桌機優先設計
從大的版面設計到小的版面
第二題
Mobile First
第三題
width: 50%
因為權重關係，. content被後面的@media (max-width: 768px){…} 蓋掉設定（後面會蓋掉前面的），小於414px，還會是50%
-->
<!-- 62. danny123
1. Mobile Frist : 以行動裝置為預設開發設計 desktop Frist: 以電腦為最初的開發設計
2. Mobile Frist
3. 50% ，最上面的.content、 max-width:414px 跟 max-width:768px 的權重都是一樣的都是使用 class 選擇器，所以看先後順序，所以由 768px 套用
-->
<!-- 63. Carrie#2750
1.Mobile First :先以手機尺寸設計(尺寸由小->大)
Desktop First:先以桌機尺寸設計(尺寸由大->小)
2.Mobile First
3.50%，權重相同，相同設定後面會覆蓋前面
-->
<!-- 64. Newman
1.Mobile First ：手機優先，從最小寬度開始設計，螢幕由小變大。
Desktop First ：桌機優先，從最大寬度開始設計，螢幕由大變小。
2.Mobile First
3.寬度小於414px，同時符合@media (max-width: 414px)、@media (max-width: 768px)，兩者權重相同，後面的CSS會覆蓋前面， 所以寬度是50%
-->
<!-- 65. 小羅#9921
1.Mobile First:先以手機尺寸設計 Desktop First:由大至小先以桌機尺寸設計
2.Mobile First
3.50%，因為css順序是後面會覆蓋前面的
-->
<!-- 66. Charlotte Lee
ans: 手機版先排跟桌面版先排
ans: 手機
ans: 50% ，因為被後面覆蓋
-->
<!-- 67. 小天#7177
1. Mobile first: 從手機版開始切版
Desktop first: 從桌機版開始切
2. Mobile first
3. 50%，因為767覆蓋了414的樣式
-->
<!-- 68. RayChen#6088
ans: 手機版先排跟桌面版先排
ans: 手機
ans: 50% ，因為被後面覆蓋
-->
<!-- 69. JessieCho
1.預設版面是行動裝版面還是桌機版面
2.mobile first
3.50% 被覆蓋啦
-->
<!-- 70. shujhen#7734
ANS 1:
Mobile First 設計:以手機為優先版面，其他大版面則使用變版修改。
Desktop First 設計:以電腦螢幕為優先版面，其他小版面則使用變版修改。
ANS 2:
Mobile First 設計
ANS 3:
寬度為 50%，
因為 小於414px 同時符合 max-width:414px 和 max-width:768px，
但 max-width:768px 順序靠後，會將前面的設定蓋掉，
所以套用到的樣式是 width:50%。
-->
<!--71. 家洋#6999
1.Mobile First設計=>代表行動裝置優先，CSS語法上以小到大，以螢幕越大的語法覆蓋先前CSS。(min-width)
Desktop First設計=>代表桌機裝置優先，CSS語法上以大到小，以螢幕越小的語法覆蓋先前CSS。(max-width)
2.min-width以小到大=> 行動裝置優先。
3.content寬度計算 =>因body小於414px，又因被media Query(max-width:768px)覆蓋，content寬度應為 50%
-->
<!-- 72. Zera#6060
1. 以手機為優先的設計，考慮螢幕由小到大的變化。考慮桌面螢幕的設計，螢幕變化是由大到小。
2.以手機為主的設計
3. 茶懸414px的裝置、什麼設備，品牌，考量以設備為主的設計。
-->
<!-- 73. mei#8421
1. Mobile First :以行動裝置為優先，從小至大
Desktop First :以電腦螢幕為優先，從大至小
2. Mobile First
3. 50% , 相同條件(寬度小於414px)且相同權重，後蓋前
-->
<!-- 74. YC#2008
Ans 1: Mobile First：在CSS寫法會先以Mobile版面切版為主，響應式寫法方面就會往PC版面去做@media(min-width)的修改。
Desktop First：在CSS寫法會先以PC版面切版為主，響應式寫法方面就會往Mobile版面去做@media(max-width)的修改。
Ans 2: Mobile First.
Ans 3: Width: 50%，兩個權重一樣的@media，後者贏!所以@media (max-width: 768px)會吃掉@media (max-width: 414px)在414px的樣式。
<!-- 75. EllieLo#9809
1.優先以手機板開發設計版面，優先以電腦板開發設計版面
2.Mobile First
3.width: 50%;
-->
<!--76. COLOR#4378
Codepen:https://codepen.io/color0602/pen/poaLawq -->
<!-- 77. Yurii#7455
1. Mobile First :行動裝置為優先，從小至大
Desktop First :電腦螢幕為優先，從大至小
2. Mobile First (小尺寸寫到大尺寸)
3. 50% , css以後面蓋前面
-->
<!-- 78. Eileen#6454
1. Mobile First由較小尺寸的螢幕開始設計到大的尺寸
Desktop First由較大尺寸的螢幕開始設計到小的尺寸
2. Mobile First
3. 50%，CSS語法後寫的會覆蓋前面的設定
-->
<!-- 79. Zoey#0839
1. Mobile First：由較小尺寸的螢幕開始設計到大的尺寸
Desktop First：由較大尺寸的螢幕開始設計到小的尺寸
2. Mobile First
3. 50%，CSS語法後寫的會覆蓋前面的設定
-->
Sign in with Wallet
Connect another wallet