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

.wrap .chest{
    max-width: 800px;
}

將父元素設定了max-width，取代掉原本寫死的width，這樣父元素就能夠隨著瀏覽器寬度而自適應。

.wrap .chest img{
    width: 30%;
}

然後子元素的寬度也不寫死，以百分比來寫。這樣當使用者的螢幕寬度變小的時候，圖片也會隨之自適應變小。

.wrap .chest img:nth-child(2){
    align-self: flex-start;
}

讓其中一個寶箱靠上的排版方式。

@media(max-width:768px){
    .wrap .chest{
        flex-direction: column;
        height: auto;
        align-items: center;
    }
    .wrap .chest img:nth-child(2){
        align-self:center;
    }
    .wrap .chest img{
        width: 50%;
        margin-top: 20px;
    }
}

在寬度小於等於768px的時候，套用裡面的設定。將chest的flex改變方向，達到直排的效果，同時剛剛PC版型而特別調整的第二個寶箱也要修正他的align-self屬性。最後，將圖片的大小改成50%，單欄式排版下讓圖片看起來比較大，並透過margin-top給予適當的間隔。

if(e.target.nodeName !== "IMG"){return}

如果點到圖片以外的地方則會直接跳出這段程式碼，不會執行後面的段落。

switch(num){
        case "0":
            e.target.src = "https://www.flaticon.com/svg/static/icons/svg/3281/3281437.svg";
            text.textContent = "你找到骷顱";
            break;
        .......
    }

用switch和data-自定義屬性，判斷到底是點擊到哪個寶箱，然後改變其src屬性造成圖片的切換，並將文字寫入網頁之中顯示出來。

－－－

備註：
圖片版權來自
Icons made by Freepik from www.flaticon.com
因為在CodePen使用瀏覽器內建的手機模擬好像會跑不太出來，所以本次就直接上傳壓縮過後的原始檔案。

－－－

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