--- tags: 軟體工程師體驗營 - 2023 --- # 🏅 切版任務 Day16 - 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 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/jOeewKd) | | 2 | Joi#4089 | [Codepen](https://codepen.io/Joi-Chen/pen/LYggLqW) | 3 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/OJBBgqw) | | 4 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/PoyyKNx)| | 5 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/yLRRopO)| | 6 | しあわせね##0036| [Codepen](https://codepen.io/Front-end-engineer/pen/Exddvov)| | 7 | Eero#1147| [Codepen](https://codepen.io/Eero-Chiao/pen/rNqqzKm)| | 8 | 史滴芬#4310| [Codepen](https://codepen.io/steven870107/pen/bGmmrvb)| | 9 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/GRYYvQz) | | 10 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/YzJJxjJ?editors=1100) | | 11 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/zYmmdgR) | | 12 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/poxxWve) | | 13 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/mdzzMPj?editors=1100)| | 13 | satarkuo#5736 | [Codepen](https://codepen.io/SatarKuo/pen/YzJJryM)| | 14 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/wvYYrGG)| | 15 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/NWOOaRR)| | 16 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/JjmmrYa)| | 17 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/WNaaZXj)| | 18 | CuraLin#2648 | [Codepen](https://codepen.io/curalin/pen/YzJJraz)| | 19 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/yLRRzpp)| | 20 | DyH#0526 | [Codepen](https://codepen.io/dorihung/pen/poxxWVp)| | 21 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/ZEqqXMj)| | 22 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/vYVVeWY?editors=1100)| | 23 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/NWOOaJa)| | 24 | HsienLu#8316 | [Codepen](https://codepen.io/Hsienlu/pen/KKGGXEo)| | 25 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)| |26| Quantum#6093|[Codepen](https://codepen.io/Min-Hao-Hung/pen/ZEqqazm)| | 27 | Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/rNqqYmE)| | 28 | Bruce-Lee#0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/xxyyPPw)| | 29 | 辣椒#1002| [Codepen](https://codepen.io/chilichen118/pen/yLRRPKr) | | 30 | PoWei#8484| [Codepen](https://codepen.io/pen/?editors=0010) | | 31 | Uli#1946| [Codepen](https://codepen.io/uli1313/pen/poxxpoz) | | 32 | betty#0693| [Codepen](https://codepen.io/betty-hu/pen/xxyypLL) | | 33 | 翔.#0859| [Codepen](https://codepen.io/energy95272z/pen/poxxpmN?editors=1000)| | 34 | jelly77#2088| [Codepen](https://codepen.io/Ming-chiang/pen/zYmmRYR?editors=1010)| |35|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/vYVVdxo)| |36| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/wvYYybe) | | 37 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/yLRRvzP) | | 38 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/RweeMjg) | | 39 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/VwEEQgY) | | 39 | 魚翅#3100 | [Codepen](https://codepen.io/Fukahire/pen/jOeexMN) | | 40 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/gOBBzqJ?editors=1100) | | 41 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/WNaaJVw) | | 42 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/RweeJZw) | | 43 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/QWZZBpB) | | 44 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/OJBBwew) | | 45 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/MWPPqYW) | | 46 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/yLRRxyB) | |47|wiimax#4564|[Codepen](https://codepen.io/willismax/pen/LYggJRz?editors=1000) |48|變羊魔法#6372|[Codepen](https://codepen.io/cssf998811/pen/PoyydXr)| |49|K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/eYPPPgy)| | 50 | Maxine#9061 |[Codepen](https://codepen.io/Maxine_Liao/pen/poxxxwr)| | 51 | N0c7iluc3n7#4390 |[Codepen](https://codepen.io/huang-yu-cheng/pen/qBJJJLz)| | 52 | Janet#5784 |[Codepen](https://codepen.io/janetlinnn/pen/GRYYwgN?editors=1010)| | 53 | jackwu#4437 |[Codepen](https://codepen.io/jackwu1588003/pen/wvYYQXX)| | 54 | andrew0404#4576 |[Codepen](https://codepen.io/Loonng/pen/yLRRGay)| | 55 | Hao#2485 |[Codepen](https://codepen.io/Seanfeb16/pen/LYggVzo)| 66|雲漢#5319|[codepen](https://codepen.io/keon981/pen/mdzQbJY?editors=1010) 67|SKey#9905|[codepen](https://codepen.io/Dale-Chien/pen/dygQbab) 68|泊岸#3466|[codepen](https://codepen.io/qoq77416416/pen/VwEVwgb?editors=1000) 69|alan0305#2423|[codepen](https://codepen.io/alan0305/pen/Poyxwby) | 70 | Tina02#2691 | [codepen](https://codepen.io/riifwerr-the-selector/pen/qBJQEXX) | | --- | -------------------- | --------------------------------------------------------------------------- | | 71 | moins13#3346 | [codepen](https://codepen.io/kyechen13/pen/yLRQyRO) | | 72 | FiReBrO#0557 | [codepen](https://codepen.io/firebro42/pen/bGmQVWa) | | 73 | 肉個阿倫#7172 | [Codepen](https://codepen.io/i9574385/pen/gOBQrep) | | 74 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/xxyQEqq) | | 75 | yoyo#1003 | [Codepen](https://codepen.io/pen/dygQOZr) | | 76 | Yvonne#2721 | [Codepen](https://codepen.io/Evonne/pen/abRRRBj) | | 77 | 吳偉雄恩#2256 | [Codepen](https://codepen.io/Bamboo1212/pen/rNqQydM) | | 78 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/mdzQLmL) | | 79 | wendyli#2155 | [Codepen](https://codepen.io/rockayumitw/pen/qBJQQYd) | | 80 | jimhop#6510 | [Codepen](https://codepen.io/jimsansssss/pen/MWPzMVz) | | 81 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/bGmObme?editors=1100) | | 82 | 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/GRYPoJO) | | 83 | alll6z#9204 | [Codepen](https://codepen.io/A6Z/pen/GRYPZOb) | | 84 | 冷曄#9378 | [Codepen](https://codepen.io/HgHale/pen/mdzarbw) | | 85 | Elma#4317 | [codepan](https://codepen.io/4317/pen/bGmOqwx) | | 86 | Sonia Wu#7154 | [codepan](https://codepen.io/YUJOU/pen/PoyXdgy) | | 87 | bonnieli1414#4906 | [codepan](https://codepen.io/bonnieli1414/pen/WNaPNXE?editors=0010) | | 88 | jun777#2468 | [codepan](https://codepen.io/js18151102/pen/oNamLVg?editors=1000) | | 89 | 鉦勝#8333 | [codepan](https://codepen.io/atckmax823/pen/rNqQEYP) | | 90 | weiting#3489 | [codepan](https://codepen.io/weiting14/pen/yLRZjJQ?editors=1100) | | 91 | 長方形#9612 | [codepan](https://codepen.io/imjjw/pen/yLRZEKO) | | 92 | Lainie#1931 | [codepan](https://codepen.io/Lainie88/pen/wvYRKMg) | | 93 | JasonChang#7847 | [codepan](https://codepen.io/jsonChangJava/pen/xxyBGGR) | | 94 | 小魚#8614 | [codepan](https://codepen.io/gizelliang/pen/XWxGdMK) | | 95 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/YzJgGNq) | | 96 | 羽毛#5463 | [Codepen](https://codepen.io/KYuFeather/pen/ZEqPxgR) | | 97 | penny#6214 | [Codepen](https://codepen.io/penny8989/pen/QWZoYKo) | | 98 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/ExdMMLR) | | 99 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/PoygqEd) | | 100 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/BaqeBzY) | | 101 | JhouHank#8132 | [Codepen](https://codepen.io/JhouHank/pen/WNaBeML) | | 102 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/ZEqNEJB) | | 103 | 喬喬#2824 | [Codepen](https://codepen.io/joanne-wei/pen/KKGLEPj) | | 104 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/rNqEvrd) | | 105 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/LYgKrxY) | | 106 | Jaredlee#5887 | [Codepen](https://codepen.io/jared-lee/pen/abRgQXw) | | 107 | 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/qBJeqGO?editors=0100) | | 108 | +7#8492 | [Codepen](https://codepen.io/tojibom/pen/wvQwGoz) | | 109 | lishuan#3698 | [Codepen](https://codepen.io/lishuan/pen/NWEWONq) | | 110 | 初心#9021 | [Codepen](https://codepen.io/Sylviax/pen/abQzMQg?editors=1000) | | 111 | pss940909#8650 | [Codepen](https://codepen.io/pss940909/pen/rNQVpPV) | | 112 | 慢慢來#4035 | [Codepen](https://codepen.io/kikiyang/pen/PoxZwxJ?editors=1000) |