何謂響應式網頁，在維基百科上有這樣的定義，
響應式網頁(Responsive Web Design，RWD)，是一種網頁設計的技術，這種設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。

為了解決不同裝置之間大小的差異，CSS提供了Media query的設計，寫法如下:

@media(max-width:576px) {
    .col {
        width: 100%;
    }

    .col h1 {
        text-align: center;
        font-size: 24px;
    }
}

max-width:576px的意思是，這個設計只有在裝置的寬度小於等於576px的時候才會生效。而至於576px這個數字是統計出來最小型的手機寬度，當然你也可以改成你要的大小。

你也可以，使用and 連結兩個條件，使裝置寬度在 577~991之間形成另一種版型，(991px為平板電腦的版型)

@media(min-width:577px) and (max-width:991px) {
    .col {
        width: 50%
    }
}

今天的教材可以至我的GitHub上下載 我的第一個網頁-6