# 🏅 Day 18 - media query

Media Query 是實現響應式網頁設計 (RWD) 的核心技術。它能讓你的網頁根據不同的螢幕大小，自動調整樣式，提供更好的使用者體驗。

### 使用方式
@media (條件) { ... }

max-width: 當螢幕寬度小於等於設定值時，套用裡面的樣式。
範例：`@media (max-width: 768px) {...}` 適用於手機和平板 (寬度 768px 以下)。
min-width: 當螢幕寬度大於等於設定值時，套用裡面的樣式。
範例：`@media (min-width: 992px) {...}` 適用於大型螢幕。

### 題目
使用此 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/vEOGgLz?editors=1100)，試著在「...」的地方加上 Media Query 相關屬性完成剩下的版型，讓網頁在不同螢幕尺寸下呈現不同樣式，如圖：

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）


<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/KwpzgaZ?editors=1100
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/PwPYepG?editors=1100) |
| 2 | 孟 | [Codepen](https://codepen.io/Mengru0503/pen/YPyKLVP?editors=1100) |
| 3 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/ogjvdWK) |
| 4 | Jenna |[Codepen](https://codepen.io/abiscc14/pen/ByoBxwW) |
| 5 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/yyYBjzj) |
| 6 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/ogjvdpN)|
| 7 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/pvjzVdL) |
| 8 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/JoYPvpQ) |
| 9 | Shawn |[Codepen](https://codepen.io/LiShang/pen/dPYbeeo) |
| 10 | pastor |[Codepen](https://codepen.io/peter_hung/pen/yyYBjQx) |
| 11 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/MYagGZz?editors=1100) |
|12|Saika|[CodePen](https://codepen.io/saika4501/pen/QwjLrRx?editors=1100)|
| 13 | Hao |[Codepen](https://codepen.io/Howell/pen/qEOWKWO) |
| 14 | 燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/qEOWKZZ)
| 15 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/raOBKmN) |
| 16 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/NPGKzjO) |
| 17 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/yyYBqba) |
| 18 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/myebjxg) |
| 19 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/zxvOJGL?editors=1100) |
| 20 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/NPGKLjg) |
| 21 | KlausChen |[Codepen](https://codepen.io/Klaus-Chen/pen/MYagqrB?editors=1100) |
| 22 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/ZYbzMmm?editors=1100) |
| 23 | Esther |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/KwdPxYB?editors=1100) |
| 24 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=bNVbmdM) |
| 25 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/QwjLZro?editors=1100) |
| 26 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/QwjLZVP) |
| 27 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JoYPmaE?editors=1100) |
| 28 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/qEOWQdV) |
| 29 | WAWATA |[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/vENBZOz) |
| 30 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/VYvZqZO?editors=1100) |
| 31 | Eagle Huang |[Codepen](https://codepen.io/YuCi/pen/OPyLryN) |
| 32 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/azvoXKZ) |
| 33 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/OPyLdBo?editors=1100) |
| 34 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/wBKwOKb?editors=1100) |
| 35 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/xbwKBaj?editors=1100) |
| 36 | Sam.S.T.Y |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/KwdPYQQ?editors=1100)
| 37 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/myebgqV)
| 38 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/ByoBeBm)
| 39 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ogjvRNb?editors=1100)
| 40 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/YPyKRQJ) |
| 41 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/qEOWzZV?editors=1100) |
| 42 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/ogjvKNm) |
| 43 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/XJmWKoz) |
| 44 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/myedEoY)|
| 45 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/bNVGoKx) |
| 45 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/WbQNPdK?editors=1100) |
| 46 | suemma |[Codepen](https://codepen.io/suemma/pen/PwPogpq) |
| 47 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/JoYjqog?editors=1100) |
| 48 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/yyYyyoo) |
| 49 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/GgpggMg) |
| 50 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/ZYbYpya) |
| 51 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/QwjwMBv) |
| 52 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/XJmJVqq) |
| 53 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/xbwKbJK) |
| 54 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/VYvLvwP) |
| 55 | kate_bearchou |[Codepen](https://codepen.io/fhljksmg-the-styleful/pen/KwpzgaZ) |
| 56 | B |[Codepen](https://codepen.io/Babel777/pen/pvjjrVb) |
| 57 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/OPyMXVp) |
| 58 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/yyYebwv) |
| 59 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/raOxrdb) |
| 60 | water |[Codepen](https://codepen.io/wateruby/pen/bNVEypN)|
| 61 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/YPyqGgL) |
|62|小趴|[Codepen](https://codepen.io/papa2415/pen/XJmdRPZ)|
|63|KOMATSU PEI|[Codepen](https://codepen.io/Komatsu2021/pen/azvBLBd?editors=1100)|
| 64 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/ByoQxvw?editors=1100) |
| 63 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/bNVgqmr?editors=1100) |
| 64 | Lucy |[Codepen](https://codepen.io/Lucytrycode/pen/azvJXrO) |
| 65 | cindy |[Codepen](https://codepen.io/a50134/pen/WbQOMJE) |
| 66 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/YPyEWJy) |
| 67 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/NPGEWGd?editors=1100) |
| 68 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/EaPKXMm?editors=1100) |

<!-- 快速複製 -->
<!-- | 排序 | 姓名 |[Codepen](連結) | -->