6.5 自適應網頁設計 (Responsive Web Design)

　　HTML5 與 CSS3 可以幫助我們設計自適應 (responsive) 網頁。自適應指的是網頁會依據不同的螢幕大小，呈現出不同的樣式，讓一個網頁無論在電腦、平板還是手機上都能保有很好的瀏覽體驗。以下簡單介紹自適應網頁設計 (Responsive Web Design) 最基本的作法：

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

　　在 HTML 的 head 中加入此標籤可以使頁面寬度與螢幕寬度一致。

@media screen and (max-width: 320px) {
    p {
        font-size: 10px;
    }
}

　　如此可針對不同的螢幕寬度設計不同的 CSS。