--- tags: 2021 程式體驗營 --- {%hackmd theme-dark %} # 6/18 每日任務 Day10 ## HTML 任務題目 請回答關於 RWD 的三題問答題： ### 第一題 請說明 Mobile First 設計與 Desktop First 設計分別是什麼意思？ **Ans: Mobile First 代表從小解析度開始設計，Desktop First 代表從大解析度往小的設計** ### 第二題 請問下方代碼這種寫法是屬於 Mobile First 設計還是 Desktop Frist 設計？ ```css= .item{ width: 100%; } @media (min-width: 768px) { .item{ width: 50%; } } @media (min-width: 1440px) { .item{ width: 25%; } } ``` **Ans: Mobile First** ### 第三題 請問當螢幕寬度小於 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%; } } ``` **Ans: 螢幕最大解析度 <- 錯誤** **助教正解: 不會執行，因為ＣＳＳ的順序是後面會覆蓋前面的，所以手機版已經被平板尺寸的樣式覆蓋掉，不管是平板還是手機版都會顯示 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 代碼 ### Result: ![](https://i.imgur.com/5hH7WT9.jpg) **Ans: [連結](https://whimsical.com/2021-6-18-day10-J1A9jPGhsDJfRhMTRaqatA)**