9 練習
1 介面 hamburger icon
檔名建議：btn_hamburger.html
例如以下 apple 行動版官網，影片示意：
提供 html：
<button type="button" id="btn_hamburger"></button>切換 class 的 JS 程式：
let btn_hamburger_el = document.getElementById("btn_hamburger");
btn_hamburger_el.addEventListener("click", function(){
this.classList.toggle("-on")
});參考作法：
2 導覽列縮合
檔名建議：nav_switch.html
提供 html：
提供 JS：
參考作法：
漸進式的展開縮合，因為會用到 JS，單靠 CSS 無法做到，故同學學完 JS 之後，可再來研究：
3 內容圖片佔滿版及寬高比
檔名建議：aspect_ratio.html
提供 HTML 如下：
當螢幕寬度小於等於
767.98px以下時，圖片要在div.img_block區塊水平方向、垂直方向皆置中；且div.img_block需佔螢幕的滿版，且寬高比需是2:1。請參考下方 CodePen 的畫面結果，實作看看。
使用 aspect-ratio 來做一個元素的寬高比，例如寬高比 2:1 ：
參考作法：
4 行動版呈現左右滑動
檔名建議：mobile_slide.html
提供 html 如下：
請直接參考下方 CodePen 的畫面結果，實作看看。
參考作法：
5 Youtube iframe 影片 RWD
檔名建議：youtube_iframe_rwd.html
提供以下 iframe 影片，它的寬高比為 560:315，也就是 16:9。
執行完的結果示意：
參考作法：
Last updated