--- tags: 30 天軟體工程師體驗營｜2025 --- # 🏅 切版任務 Day15 - RWD 觀念補給 > 建議觀看的影音章節： > RWD - 伸縮自如的 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 寬度為多少？為什麼？ HTML： ```htmlembedded= <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%; } } ``` ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： 第一題： 手機優先設計從最小寬度開始設計，一開始直接寫的是手機版，往後是 @media (min-width: 768px){...}、@media (min-width: 1024px){...} 等等這種逐漸往大螢幕設計的順序。 桌機優先設計從最大寬度開始設計，一開始直接寫的是桌機版，往後是 @media (max-width: 768px){...}、@media (max-width: 414px){...} 等等這種逐漸往小螢幕設計的順序。 第二題： Mobile First，因為他是從最小寬度開始設計的。 第三題： CSS 的順序是後面會覆蓋前面的，所以手機版已經被平板尺寸的樣式覆蓋掉，不管是平板還是手機版都會顯示 50％ 寬度。 --> 回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 1 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/EaaMmOw) | | 2 | 随縁 | [Codepen](https://codepen.io/zuien/pen/EaaMmBo?editors=1100) | | 3 | dean | [Codepen](https://codepen.io/ch933114/pen/LEEaLNX) | | 4 | DD | [Codepen](https://codepen.io/dorihung/pen/ZYYPyvx) | | 5 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/oggVwLJ) | | 6 | B | [Codepen](https://codepen.io/Babel777/pen/myyowQV) | | 7 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/oggVwmv) | | 8 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/EaaMvNq?editors=1100) | | 9 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/xbbBLwv) | |10|JHT|[Codepen](https://codepen.io/juanht/pen/zxxbzoj)| | 11 | 7Lun | [Day-15 Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/OPPqjzz) | | 12 | Owen He | [Codepen](https://codepen.io/owen1120/pen/raaRzdX) | | 13 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/raaRzRa) | | 14 | Klaus Chen | [Codepen](https://codepen.io/Klaus-Chen/pen/GggevLQ) | | 15 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/OPPqjYw) | | 16 | pastor | [Codepen](https://codepen.io/peter_hung/pen/vEEPJvJ) | |17|Saika|[Codepen](https://codepen.io/saika4501/pen/dPPrVzd?editors=1111)| | 18 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/YPPgrVL) | | 19 | kururu110 | [Codepen](https://codepen.io/ecqyjuck-the-decoder/pen/XJJGzXV) | | 20 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/pvvYWYE?editors=1100) | | 21 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/XJJGzRq) | | 22 | 馬德 | [Codepen](https://codepen.io/maywang/pen/emmXeBy?editors=1000) | | 23 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/JoozOaz) | | 24 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/emmxwyK?editors=1100) | | 25 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/KwwEZOL) | | 26 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/yyywzQa) | | 27 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/ByybJgO) | | 28 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/EaaMojz?editors=1100) | | 29 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/pvvLEZY) | | 30 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/NPPJYYd) | | 31 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/myyoLMm?editors=1000) | | 32 | ggininder | [Codepen](https://codepen.io/wei900221/pen/vEEPjJg) | | 33 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/bNNZMJm) | |34|蛋殼|[Codepen](https://codepen.io/weybrian/pen/oggVyWo) | 35 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/ByybPXW?editors=1000) | | 36 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/LEEarMm) | | 37 | 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/wBBOxqG) | | 38 | 所有人 | [Codepen](https://codepen.io/ypfttckg-the-looper/pen/zxxbmgE) | | 39 | Hawkeye Lin| [Codepen](https://codepen.io/long-long/pen/EaaMeBP) | | 40 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/EaaMdBb) | | 41 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/pvvYQRP) | | 42 | Aoi | [Codepen](https://codepen.io/zching07/pen/ByybGqL) | | 43 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/pvvYqjK) | | 44 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/RNNONWa) | | 45 | yang |[codepen](https://codepen.io/Yang-J/pen/QwwPbZW?editors=1002)| | 46 | 牛奶 | [Codepen](https://codepen.io/0omilko0/pen/PwwgzMz?editors=1100) | | 47 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/dPPLNLB?editors=0010) | | 48 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/vEEPWbO) | | 49 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/qEEwPqR)| | 50 | Jane | [Codepen](https://codepen.io/jkmx/pen/zxxXWQJ) | | 51 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/XJJQEQY)| | 52 | leo_tzou | [Codepen](https://codepen.io/JH_Portfolio/pen/gbbyjvY) | | 53 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/emmXabg) | |54|小趴|[Codepen](https://codepen.io/papa2415/pen/abrOaeO)| |55|jingle0900|[Codepen](https://codepen.io/EvaLi0472/pen/wBBZbMX?editors=1100)| |56|BL|[Codepen](https://codepen.io/bonnieli1414/pen/bNNyqbw?editors=1111)| | 57 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/myyYLwe?editors=1100) | | 58 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/jEEoKeo?editors=1100) | | 59 | Michael - 鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/LEEajVE)| | 60 | vima | [Codepen](https://codepen.io/chin7004/pen/xbbvzmb) | | 61 | ja4071 | [Codepen](https://codepen.io/SHAO-L/pen/MYYNPeG?editors=1112) | | 62 | kelsonhouse | [Codepen](https://codepen.io/Kelson-House/pen/jEPNXPN)| | 63 | melody08 | [Codepen](https://codepen.io/Xuan-han-Chen/pen/MYwWRNJ) | | 64 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/YPXPMpx) | | 65 | kent_31665 | 1.(1)先設計手機板型；(2)先設計電腦版型 2.Mobile First 3.50% | | 66 | Lynn | [Codenpen](https://codepen.io/Yen-Ling-Peng/pen/ZYGWoKo) | | 67 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/VYLPZoe) | | 68 | Astrid | [6/6](https://codepen.io/astrid321654/pen/ByNZzbR?editors=1100) | | 69 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/JodZxgm) | <!--快速複製 | num | user | [Codepen]() | -- >