本日小作品：
https://drive.google.com/file/d/1VAUxZMvO99KMc5yYAPXkbFD81DxeBn2j/view?usp=sharing

img{
    max-width: 100%;
    height: auto;
}
*,*::before,*::after{
    box-sizing: border-box;
}

RWD的起手式，算是RWD時的一種css reset（？），讓圖片自適應同時不用去計算padding等等。

@media(max-width:767px){
    .header .content{
        flex-direction: column;
    }
    .header .logo img{
        width: 100%;
        height: 100px;
    }
    .header .menu{
        display: none;
        width: 100%;
    }
    .header .btn{
        display: block;
    }
}

這次設定max-width:767px（因為iPad是768px），這裡是將寬度更小的全部一起設定。
首先，原先使用flex將logo與導覽列並排成一排，此時改變flex-direction屬性，將其轉為column就可以達到我們要的效果。
再來是logo圖片原本在並排成一列的時候寬度是30%，這裡拉成滿版的100%。
同時因為導覽列資訊過多，不宜全部擠在畫面中，所以此時透過display: none;讓導覽列暫時消失。反之，讓選單按鈕出現。

var btn = document.querySelector(".btn");
btn.addEventListener('click',function(){
    var menu = document.querySelector(".header .menu");
    if(menu.style.display == "none"){
        menu.style.display = "block";
    }else{
        menu.style.display = "none";
    }
},false)

在選單按鈕上榜定點擊事件，當導覽列是被隱藏的時候則打開，反之則關閉。

@media(max-width:767px){
    .header .menu li{
        width: 100%;
    }
}

將原本併排成一列的li寬度變成滿版。就完成了今日的選單收合和RWD效果。

－－－

備註：
因為在CodePen使用瀏覽器內建的手機模擬好像會跑不太出來，所以本次就直接上傳壓縮過後的原始檔案。

－－－

本日結語：
今天是二十三天，主要將導覽列做出RWD的效果，如有寫錯之處麻煩各路高手指教><。