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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

預設情況下就會有，但是其實意外的很重要的一行，因為手機的螢幕解析度其實相當高，但原始物理上的寬度就只有那麼寬。因為螢幕上的字體是靠pixel去呈現，在小手機+高解析度的情況下，1px就會很小。
而這一行中的content="width=device-width就是讓螢幕的解析度強制等於實際寬度，這樣兩邊的1px就會是一樣大的。

@media(max-width:768px){
    .ask{
        font-size: 30px;
        padding: 80px 0 50px;
    }
}

響應式網頁的起手式，透過@media(max-width:768px){......}語法，利用CSS同樣權重後面會覆蓋前面的特性，在原本的PC設定之後寫這一段，當括號內的情況符合時就會套用{}內的設定。這裡白話的翻譯就是寬度在768或768以下的時候套用以下設定。
這裡讓字體變大並且稍微調整padding，讓畫面看起來自然一點。

@media(max-width:376px){
    .ask{
        width: 100%;
        font-size: 20px;
        padding: 50px 0 40px;
    }
}

這邊則是寫給手機的段落，一般來說會去符合768和375兩個斷點（iPad和蘋果手機）。
這裡是當使用者使用手機的時候讓標題寬度變成100%，並調整字體大小讓畫面顯得自然。

@media(max-width:376px){
    .flags{
        width: 100%;
        flex-wrap: wrap;
    }
}
@media(max-width:376px){
    .flags img{
       width: 132px;
       height: 132px; 
    }
}

這裡是在手機情況下讓父容器寬度變成100%，並且透過flex-wrap讓子元素換行。
然後將圖片的大小固定，這樣就會自動從四個一列變成2x2的正方形排版。

－－－

備註：
本小作品使用了Pure.css的按鈕
圖片版權來自
Icons made by Freepik from www.flaticon.com

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

－－－

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