---
# System prepended metadata

title: "\U0001F3C5 Day 18 - media query"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 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://i.imgur.com/vftL5i0.png)

<!-- 解答：
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](連結) | -->