---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/20(二) 每日任務

## 題目
**選擇題，一共五題，可群組討論，請在任務提交時要解釋選擇答案的原因。**

1. 請問下列何者是正確的 media query 語法？

A. @media (min-width: 600px) {...}
B. @media min-width: 600px {...} 
C. @media (min-width = 600px) {...}
D. @media min-width = 600px {...}

2. 根據以下 CSS 請問最後字呈現的顏色為什麼？

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

    <style>
    	.color-class { color: blue; }
    	#color-id { color: red; }
    	div {color: yellow; }
    </style>

A. 藍色
B. 紅色 
C. 黃色
D. 黑色

3. 根據以下 CSS，在螢幕解析度 600px 時文字的顏色為何？

    @media (min-width: 576px){
        p { color: red;}
    }
    @media (min-width: 768px){
        p { color: black; }
    }
    p { color: yellow; }

A. 紅色 
B. 黑色
C. 黃色
D. 藍色

4. 根據以下 CSS，在螢幕解析度 600px 時文字的顏色為何？

    p { color: yellow; }
    @media (min-width: 576px){
        p { color: red;}
    }
    @media (min-width: 768px){
        p { color: black;}
    }

A. 紅色 
B. 黑色
C. 黃色
D. 藍色

5. 針對響應式圖片的設定，應該幫 img 標籤加上什麼語法？

A. max-width:100%
B. width:100%
C. max-width: 100px
D. width: 100px

## 回報流程

1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：ABCAA -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
答案：ABCAA（可直接撰寫答案）
Codepen：https://codepen.io/Bingbingboom/pen/MWpVrRw
-->

<!-- 1. 焦糖
答案：ABCAA
-->

<!-- 2.孫 sunne
ABCAB -->

<!-- 3.Jasmin
ABCAA
-->

<!-- 4.lumei
ABCAA
-->

<!--5.Alpha
ABCAA
1.請看w3c
2.id權重最高
3.老師說 先看權重再看前後 權重都一樣就是最後面的為主
4.跟第三題一樣但是因為有寬度偵測所以會在範圍內效果
5.利用最大寬度來縮放

-->

<!--6.文文
ABAAA

-->

<!-- ˙7. Sz
ABCAA
-->
<!-- 8.陳sam
解答：ABCAA
-->

<!-- 8. Xing
A B C A A
-->

<!-- 9. Cheng Pei-hsuan
A B C A A
-->

<!-- 10. Sam li
A B B(答案是C才對) A A
--->

<!-- 11.肉鬆
A B C A A
-->

<!-- 12. Eric-小偉哥
A B A(X->C) A B(X->A)
-->

<!-- 13. 蔡明達
A B C A A
-->

<!-- 14. Jean
A B A(應為C) A A
-->

<!-- 15.Lina Chen
A B C A A
-->

<!--16.yijun
答:A B C A A
解釋:
1.A
2.B，因為id權重為100，是權重最大的。
3.C，因為三個權重一樣，所以比較先後順序，黃色為最後。
4.A，因為min-width:576px為最小寬度576px，在576px~767px間都是紅色。
5.A，代表圖片寬度最大只到100%，寬度可以自由縮放但不會比原圖大。
-->

<!-- 17. Joy Cheng
codepen https://codepen.io/joycheng5432/pen/bGWrGde
-->
<!-- 18.LiShang
A B C A A
1.
2.id選擇器的權重最高，故以id設的顏色優先
3.在最後設定了所有p都為黃色，覆蓋了之前的media-query
4.600px介於 min-width:576之中
5.max-width讓img可以響應是縮放大小
-->

<!-- 19. 葉小嵐
答案：ABCAA
1、語法就是這樣
2、看權重-標:1分 類別:10分 ID:1000分 !Importmant:1萬
3、先權重再看順序，權重一樣，但順序P為最後。
4、MIN-WIDTH:576，意指最小576，576<數值為紅。
5.MAX-WIDTH:RWD語法。最大寬度100%。
-->

<!-- 20. Joanna chang
答案：ABCAA-->

<!-- 21. 雷古娜
codepen：https://codepen.io/tinahopo/pen/YzVxKmM -->

<!-- 22. Jun Chan
1.A，完整寫法
2.B，裡面id權重最大，id 100分>class 10分>div標籤 1分，所以是紅色
3.C，解析度600時，滿足min-width: 576px及全域p設定，兩者權重一樣所以看先後順序，故顏色為黃色
4.A，同第三題原因，權重一樣看先後順序，故顏色為紅色
5.A，RWD的img設定，讓圖片即使在小螢幕也可以跟著伸縮
-->

<!-- 23. Gui
1. A
2. B
3. C
4. ~~B~~ 答案因為 A，原因：一開始設定為 yellow，但因為螢幕解析度 600 並沒有小於最小寬度 576px，所以適用；但已經小於 768px，所以不適用顏色為 black 那層 RWD 設定
5. A
-->

<!-- 24. RitaHuang
1. A 2. B 3. C 4. A 5. A
-->

<!-- 25. Yao Lin
答案：ABCAA
-->

<!-- 26. Gill
答案：ABCAA
-->
<!-- 27. Tina Ten
Ans: A,B,C,A,A
-->

<!-- 28. 阿和
答案:1.A 2.B 3.C 4.A 5.A
-->

<!-- 29. 黃士桓
1. A @media 必須使用()來做設定，()內的參數類似CSS屬性需要由 詞綴 : 參數 的方式輸入
2. B id-100分 class-10分 元素-1分
3. C 先後還大於media
4. A >=576 device >=768
5. A 限制最大值才會讓圖片寬度等比例縮小
-->

<!-- 30. Tori
A | B | C | A | A
-->

<!-- 31. Cate Chang
答案:1.A 2.B 3.A(X->C) 4.A 5.A
3、忘了看權重順序，只看了 min-width 的內容去判。因為權重一樣，故文字會呈現最後的黃色。
-->
<!-- 32. ZY Hsu
A B C A A -->

<!-- 33. KK
1. A
2. B (ID 權重 100分)
3. C (因為三個權重一樣，後面覆蓋前面)
4. A (在 576~767px 之間是紅色)
5. A (因為可以限制圖片最大 100%, 才不會超出父層) -->

<!-- 34. Elaine Liu
1. A
2. B:因為 id 選擇器權重高於標籤和類別選擇器
3. C:權重相同下，後面會蓋掉前面的 css 設定，所以是黃色
4. A:權重相同下，後面會蓋掉前面的 css 設定，且螢幕解析度高於 576px，未滿 768px，所以會吃到 576px的設定
5. B (此題正答是A)
-->

<!-- 35. peter.chen
ABCAA
第3題:響應式程式碼應放最後面，否則會被一般樣式覆蓋，導致沒有響應式
-->

<!-- 36. curry
答案:1.A 2.B 3.C 4.A 5.A
-->

<!-- 37. Summer.H
答案:A B C A A
-->

<!-- 38. 阿熊
Ans: ABCAA -->

<!-- 39. icy
ans: A B C A A -->

<!-- 40.natsu
Ans: ABCAA
3. 前面設定完最後又補一個p { color: black;}依照順序為它為最後 -->

<!-- 41. YuriT
Ans:
1. A. @media (min-width: 600px) {…}
2. B id權重為100分，是裡面權重最大的
3. C 三個權重一樣，所以比較CSS內的先後順序
4. A min-width:576px => 最小寬度576px，在576px~767px區間<p>都是紅色
5. A 圖片寬度最大到100%，寬度可以自由縮放但不會比原圖大 -->

<!-- 42. Ruby Chiang
1.A
2.B 先看權重，再看先後。 以權重來說，id>class>html tag，所以會顯示紅色
3.C 題目滿足第一個及第三個選擇器，未滿足第二個。而第三個選擇器則因寫在後所以會覆蓋掉第一個選擇器指定的顏色，故顯示黃色
4.A 題目滿足第一個及第二個選擇器，後者覆蓋前者，故顯示紅色
5.A 將圖片最大寬度設為滿版，則圖片會依照螢幕寬度縮放，不會超過螢幕寬度造成出現X軸
-->

<!-- 43. kevinhes

1.A B max-width 沒有括號 C max-width 不是用等於 D max-width 沒有括號也不是用冒號
2.B 因為id選擇器的權重分數有100分
3.C 因為後面壓前面，所以是黃色
4.A 因為 600px 的解析度 在768px 的斷點開啟
5.A img 才不會因為解析度縮放，而變形

-->

<!-- 44. 群嘉
1.A正確答案
B少了()
C=改為:就是正確答案
D少了()與=改為:

2.B紅色
因為權重為id>class>html標籤

3.C
雖然(min-width: 576px)有符合自會變紅色但是
最後標籤是黃色，權重一樣看最後

4.A
因為是(min-width:576px)
從576px含576px起到下一個min-width:768px
576-767px 自都是紅色的

5.A
加上max-width:100%，就會跟隨父層寬度
-->

<!-- 45. Karen Huang
1. A
2. B 權重大小順序：ID > class > html
3. C 因為文字顏色黃色的CSS寫在段落最後一行，最後樣式會是黃色
4. A p段落在 576px ~ 767px 之間都會是紅色
5. A 加入max-width: 100% 可確保圖片在容器的各種RWD縮放之下都不會破版
-->

<!-- 46. anna
答案:https://codepen.io/annhys/pen/NWjvxXL
-->

<!-- 47. stepha
1. 答 : A
2. 答 : B (因為id權重最高)
3. 答 : A (因為600px在768px~576px之間 而576px是紅色)
更正 : C (因為權重一樣 故以先後順序優先)
4. 答 : A (因為600px在768px~576px之間 而576px是紅色)
5. 答 : A (使圖片可以自由伸縮不會變形)
-->

<!-- 48. Katie Zhao
1.A
2.B
根據權重排行
3.C
先權重再看順序, 選項權重一樣, 但順序P為最後 p { color: yellow; }, 所以文字顏色黃色
4.A
min-width:576px ; 576 < 數值600px 所以文字顏色為紅色
5.A
max-width, RWD語法, 讓img可響應式縮放比例大小
-->

<!-- 48. Meng
1.A
2.B
3.A (X->C 權重相同時，最後一行 p{color=yellow}會覆蓋前方內容)
4.A
5.A
-->

<!-- 49. hellocrab
1. A
2. B
3. C
4. A
5. A
-->

<!-- 50. Charles
Ans: A B C A A
-->

<!-- 51. Freya
1.A |
2.B |權重:HTML 標籤選擇器1分／類別選擇器 10分／ID選擇器100分
3.C |寫最下面的css蓋過去上面?
4.B(x) |576以下、768以下
答案為A！
min-width 以上、max-width 才是以下，576以上、768以上，600 >= 576，故答案為@media (min-width: 576px){ p { color: red;}}
5.A |最大寬度
-->

<!-- 51. Irene Wang
Ans: ABCAA
codepen:https://codepen.io/irene-wang-the-looper/pen/KKmvgmr
-->

<!-- 52. Jerry Yen
A
B (ID權重最大)
C (黃色順序最後)
A (576~768 均為紅色)
A (最大寬度)

-->

<!-- 53. Jamie
A
B id的全種比較大
C 因為黃色沒有任何條件，且放在最下面
A 576-767px都會是紅色
A 可以隨著父層變大變小
-->

<!-- 54. Tansy
1. A 條件式要用括號，min-width :
2. B Red - id has higher points
3. 答A Red -> 但是其實是C 因為先後順序
4. A Red.
5. A -RWD 圖片依照大小自適應，不超過父層，不破圖
-->

<!-- 55. Una(點子數位)
A
B id權重大
C
A
A
-->

<!-- 56.格可
A
B
C
A
A
-->

<!-- 57.Hi Annie
codepen：
https://codepen.io/lhohdalu/pen/OJmjpaE
-->

<!-- 58. Ning
1. A
2. B(id權重最高)
3. C(權重一樣，後面覆蓋前面)
4. A(576-767px都是紅色)
5. A(最大寬度到100%，讓圖片可以依RWD縮放大小) -->

<!-- 59. ZOE WU
ANS:ABAAA
註：第3題正解應為C

正確答案說明：
1.A. @media (min-width: 600px) {…}
2.B. HTML標籤選擇器：1分/class類別選擇器：10分/ID選擇器：100分
3.C. 因為三個權重一樣，最後面黃色會覆蓋前面
4.A. 在 576~767px 之間，因此為紅色
5.A. 限制圖片最大 100%，才不會超出父層
-->

<!-- 60, Jameskrauser
1. A
2. B 紅色
3. B 應為C
4. B 應為A
5. A
-->

<!-- 61 Riley
1. A
2. B 先看權重。在看先後。 id權重最高，故答案為紅色
3. C 先看權重，在看先後。 三者權重相同，故為最後的黃色
4. A 因min:width:576px 在768-576px之間的文字顏色都為紅色
5. A 設定max-width:100% 讓圖片既不超出父層，也能跟著解析度伸縮
-->
<!-- 62. 大衛
1. A
2. B
3. C
4. A
5. B
-->

<!-- 63. 沈依蓉
1.A
2.B id>class>html，id的權重最高
3.C p標籤選擇器的權重相同，後面蓋前面所以是黃色
4.A 576~767為紅色
5.A max-width:100% 讓圖片可自適應父層，依RWD縮放大小
-->

<!-- 64. Sylvia-H
A / B / C / A / A
-->

<!-- 65: Sec
1. A
2. B
3. C
4. A
5. A
-->
<!-- 66.ellie
a b c a a
-->

<!-- 67.黃羽均
ABCAA
-->

<!-- 68. SihLe Huang
ABCAA
-->

<!-- 69. PHIL
1.{A};
B少了();
C”=”是設為，並不是賦予值;
D同B+C;
2.{B};
Id選擇器權重較高;
3.{C};
權重相同後面覆蓋前面;
4.{A};
Min-width為該值以上;
5.{A};
Max-width:100%為原尺寸大小，可自適應向下，但不會放大;
-->

<!-- 70. axlrock1021
答案：ABCAA
-->

<!-- 71. Nate Lu
Ans: ABCAA
-->

<!-- 72. Nate Lu
Ans: ABCAA
-->

<!-- 73. AKI
A
B (ID選擇器權重最高)
C (三者權重一樣，所以依順序來看，後面會覆蓋前面)
A (同上)
A (限制百分比例，讓圖片等比縮小放大，才不會變形)
-->

<!-- 74. Archie
A https://developer.mozilla.org/zh-TW/docs/Web/CSS/@media
B id選擇器>class選擇器>html選擇器
C 相同權重下，後面覆蓋前面
A 相同權重下，螢幕解析度為600px，在576-768之間
A 限制img最大寬度為父層寬度，便可依父層達到響應式
-->

<!-- 75. 吐司
A
B id選擇器>class選擇器>html選擇器
C 相同權重下，後面覆蓋前面
A 相同權重下，螢幕解析度為600px，在576-768之間
A 限制img百分比，使圖片等比例縮放才不會變形
-->

<!-- 76.shanglin
A
B
C
B
A
-->

<!-- 77. Jim Hwang
ABCAA
-->
<!-- 78. Jeff H https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A-->

<!-- 79.黃小瑄
A
B
C
A
A
-->

<!-- 80. Oober
ABCAA -->

<!-- 81. Alberto
ABCAA
-->

<!-- 82. LTL
ABCAA
-->

<!-- 83. Winnie
ABC(前後順序的權重）AA
-->
<!-- 8４. yellamoon 巫樾
ABC(前後順序的權重）AA
-->

<!-- 85. Zaii Hsu
ABBBA -->

<!-- 86. Erin Huang
ABAAA
1.media query 需用()來界定斷點，斷點寫法同css
2.由上而下的權重分數：
<style>標籤為inline style(1000)
class(10),ID(100), html標籤(1),所以為B紅色
3.media query 寫法為由手機到平板，600px大於 576，但還沒到768，所以768的響應式設定還沒被開啟
4.同上
5.以%比例來寫，圖片才會自適應縮放-->

<!-- 87. Shani
ABCAA
3.權重相同,看先後順序 -->

<!-- 88.sarah
A B C A A
3.因為三個權重一樣，所以比較先後順序，黃色為最後
4.因為min-width:576px為最小寬度576px，在576px~767px間都是紅色
-->

<!-- 89. jimmyfang
A B C A A

-->

<!-- 90. Kin Hei Shing
1.A 正確寫法
2.B ID權重為(100),class權重為(10)
3.C 3個權重相同，而p{ color: black;}為最後
4.A 螢幕解析度在576px之上，768px之下，所以以min-width: 575px為標準，所以是紅色
5.A 使圖片能接比例縮小

-->

<!-- 91. Joey
A B C A A
2. ID 權重最大
3. 依序執行
5. 使圖片依照 parent 大小伸縮 (即不同視窗大小)
-->

<!-- 92. Min Chun Tsai
A
B id的CSS權重相比另外兩個分數大
C 原本的p在最下面，即使上面有設斷點，因順序權重會參考最後面的設定，故為黃色
A 原本的p在最上面，可參考以下斷點，min-with表示在設定之px"以上"會有下列效果，因此選576px的紅色
A
-->

<!-- 93. WilsonHan
A
B // id權重最重
C //後面取代前面
A //600px符合min-width 576px條件
A
-->

<!-- 94. Benson
1.A (B沒有用()框起來,C屬性跟屬性值之間是用:不是=,D前兩個都錯都有)
2.B (ID權重比較大)
3.C (權重一樣時後面會覆蓋前面的樣式)
4.A (600px 符合 @media (min-width: 576px))
5.A (限制img最大寬度，當父容器寬度小於img寬度，則img寬度會自適應父容器的寬度)
-->

<!-- 95. irene
答案：ABCAA
-->

<!-- 96. AlvinChu
ABCAA
-->

<!-- 97. Jessie Cheng
1. A
@media(min-width: 600px) {...} 才是正確格式

2. B
權重 tag 1 分、class 10 分、id 100 分
id 權重最重，最後 color 會是紅色

3. C
600px 會符合第一個 576 區間，但最後一行也會吃到 CSS
先看權重再看 CSS 先後，兩者都是 p tag 權重一樣，故直接看最後面的，所以會是黃色

4. A
第一行也會吃到 CSS
但 600px 會符合第一個 576 區間
先看權重再看 CSS 先後，兩者都是 p tag 權重一樣，故直接看最後面的，所以會是紅色

5. A
給 max-width 圖片才能隨網頁伸縮、自適應父層寬度（還要再加上 height: auto）
設定為 100% 則最大只會到父層的寬度、避免破圖
-->

<!-- 98. 三隻小貓 ABC~~B~~AA 4.誤會min-width -->

<!-- 99. WA
A
B
B(C)
C(A)
A
-->

<!-- 100. Page
A
B
A/Ans.C
A
B/Ans.A
-->

<!-- 101.聿凌
A
B:因div寫id 就選#顏色
B:因小於768px選黑色;正確答案為C
B:因小於768px選黑色;正確答案為A
A:
-->

<!-- 102.ted31539
ABCAA
2 class 選擇器：10 分;HTML 標籤：1 分;lID 選擇器：100 分
3 p { color: yellow; }寫在下面，壓過上方@media (min-width: 576px)
4 解析度576-768px之間，p是紅色
5 max-width:100% 圖片可隨母層放大至不失真
-->

<!-- 103.陳品宏
A B C A A
-->

<!-- 104. YOYO
A B A(c) A A
權重相同 看最後P的樣式
-->

<!-- 105.Newman
1.A
2.B HTML標籤1分；CSS 類別選擇器 10分；ID 選擇器 100分
3.C 600px符合576px區間，但最後一行也符合。先看權重，再看先後，兩者都是p標籤，
權重一樣，故選擇後者黃色
4.A 第一行符合，576px也符合。先看權重，再看先後，兩者都是p標籤，
權重一樣，故選擇後者紅色
5.A max-width 使圖片隨網頁比例伸縮，100%最大到父容器寬度，避免破圖
-->
<!--Keep
ABCAA
https://codepen.io/keep-/pen/abwpJje
-->