--- tags: 2021 程式體驗營 --- # 6/18 每日任務 Day10 ## HTML 任務題目 請回答關於 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 寬度為多少？為什麼？ ```htmlembedded= <!-- HTML --> <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%; } } ``` ## JS 任務題目 請同學根據下方文字說明練習使用 [whimsical](https://whimsical.com/) 來繪製自己的流程圖： 小夫想去附近的兒童公園玩溜滑梯 但是公園有限制必須為 5 歲至未滿 14 歲的兒童才可以玩 於是小夫開始計算自己年齡 發現自己已經是 15 歲 請問他還可以坐溜滑梯嗎？ 該練習只需使用以下四種圖案來繪製即可： ![](https://i.imgur.com/2nRjX8w.png) step1: 進入官網點擊使用 Google 註冊或信箱註冊 step2: 點擊左上角加號選擇要繪製哪種圖選擇 FlowChart 流程圖 step3: 開始依照說明條件繪製出自己的流程圖 step4: 繪製完成後點擊右上角頭像左邊的鎖頭 找到地球那行設置成 can view step5: 點擊上方出現的 Copy Link 貼到下面回報區即可 完成後同學也可嘗試照著自己的流程圖撰寫 JS 代碼 ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) ## 作業回報區 <!-- 1. WangShuan - 答案: 第一題： 手機優先設計從最小寬度開始設計，一開始直接寫的是手機版，往後是 @media (min-width: 768px){...}、@media (min-width: 1024px){...} 這種逐漸往大螢幕設計的順序。 桌機優先設計從最大寬度開始設計，一開始直接寫的是桌機版，往後是 @media (max-width: 768px){...}、@media (max-width: 414px){...} 這種逐漸往小螢幕設計的順序。 第二題： 手機優先，因為他是從最小寬度開始設計的。 第三題： 不會執行，因為ＣＳＳ的順序是後面會覆蓋前面的，所以手機版已經被平板尺寸的樣式覆蓋掉，不管是平板還是手機版都會顯示 50％ 寬度。 ＪＳ流程圖： https://whimsical.com/W56h9tc8TKogTVvm6QEsfx --> 1. [我是泇吟 - HTML && JS 作業](https://codepen.io/kljuqbxs/pen/RwpdGpL) 2. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/WNpmGKW) 3. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/LYWaRKO) 4. [Lina Chen - HTML && JS 作業](https://codepen.io/LinaChen/pen/bGqZBwb) 5. [明達在這 - HTML 作業](https://codepen.io/bmzpfyxe/pen/LYWabjr?editors=0110) 6. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/OJpqbZJ) 7. [henry - HTML & JS 作業](https://codepen.io/henrymorgan666/pen/NWpJbaq?editors=1100) 8. [Xing CT - HTML & JS 作業](https://codepen.io/xing10/pen/xxqBRjj) 9. [Sz - HTML & JS 作業](https://whimsical.com/day10-Nq6KCF3Bmvxr9AocWexB2s) 10. [Isaac - HTML & JS 作業](https://codepen.io/isaac1125/pen/VwpRmON) 11. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/rNyRjeK?editors=1100) 12. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/full/poeYRKK)<!-- https://whimsical.com/2021-6-18-Ua49ddfFsLVvE1VQ9eMq31 --> 13. [Katie- HTML作業](https://codepen.io/aria-mi/pen/KKWEWEP?editors=1100) 14. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/rNyRmMy) 15. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/poeYexz) 16. Nap－[HTML](https://codepen.io/o0o0o1o0/full/RwpdVbB) & [JS](https://whimsical.com/2021-06-18-hex-daily-MnSfKkXFms5ZiT9sH7ikLh) 作業 17. [BaoH - HTML & JS 作業](https://codepen.io/baoh/pen/JjWzWwN) 18. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/QWpovxE) 19. [Yu](https://codepen.io/yuuuu4444/pen/LYWayeB?editors=1010) 20. William - [HTML作業](https://codepen.io/hsuweihung/pen/eYvXGNd)＆[JS作業](https://whimsical.com/js-KvvYftSy4yYshgsA2WGBFS) 21. [yu shiuan chang HTML & JS作業](https://codepen.io/prankaChang/pen/NWpJyGQ?editors=1010) 22. Hi Annie-[HTML](https://codepen.io/lhohdalu/pen/poeYaWb)&[JS作業](https://whimsical.com/6-18-UYJZwviEfbXT24LYCgVyFE) 23. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/YzZgeqv) 24. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/RwpdyMj) <!--流程圖 : https://whimsical.com/6-18-js-UBUF9i2D3BP8HSJCXVfVL5--> 25. [OAO- HTML &JS 作業](https://codepen.io/OAOAO/pen/abJMjqM) <!--流程圖 https://whimsical.com/6-18-G3C87JX7u4oJ49yjuadcVx --> 27. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug) 28. [Benson - HTML & JS 作業](https://codepen.io/polarBear712/pen/ExWMJjq) 29. [Saiki - HTML & JS 作業](https://whimsical.com/6-18-day10-9PwivGqB2ASfXg7hE4Nry2) 30. [Anne Lin - HTML & JS 作業](https://whimsical.com/6-18-day10-Ko34yvAPuSYe6sSf7gvon1) 31. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/VwpRJyZ) 32. [Min - HTML作業](https://codepen.io/minnn7716/pen/rNybNqQ) 33. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/gOmyWGZ?editors=1100) 34. [Sabrina](https://codepen.io/a120220ms25/pen/rNybYrr) 35. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/GRWLLPO?editors=1000) 36. [PinYin - HTML作業](https://codepen.io/PinYin/pen/mdWYJJX) 37. [LTL - HTML作業](https://codepen.io/ltlin93/full/GRWebjg)＆[JS作業](https://whimsical.com/6-18-day10-EaGvUXPEci9UJ4RgZoyr48) 38. drumrick - [HTML 作業](https://codepen.io/drumrick/pen/mdWYZab) 以及 [flowchart 作業](https://whimsical.com/4fQcQtQWGvBwXhDnH7eks6) 39. [jie -HTML作業](https://codepen.io/jie333/pen/QWpXKVm)[&JS作業](https://whimsical.com/57GCbpQTwrnxyViQiwCR9p) 40. [Kelvin Wu - HTML作業](https://codepen.io/kai5363/pen/gOmNRXJ) 41. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/zYZgPKo) 42. [蔡秉祐 - HTML 作業](https://codepen.io/cwrzyhae-the-animator/pen/NWjWpLN) 43. [Erica Chen - HTML&JS作業](https://codepen.io/ericachen/pen/PomoByB) 44. [袁祥恩](https://whimsical.com/C8pvijfFS3Eroao4eh9KRE) 45. [betty - HTML&JS作業](https://codepen.io/betty-hu/pen/wvdKmXe?editors=1010) 46. Shiny -[ HTML](https://codepen.io/OAOAO/pen/abJMjqM) & [JS 作業](https://whimsical.com/6-18-UGsghScsdQ3HkZR9xbipvZ) 47. zong-huan-[HTML作業](https://codepen.io/wxsobwib-the-encoder/pen/MWmEPWM)&[JS作業](https://whimsical.com/6-18-L5jHzoAJvqzgTY3BDjipAa)