1.必須引入標籤：
設定 meta 標籤

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

在設定視口時需要注意，視口就是網頁可見區域的尺寸，設定視口時只設置寬度就行，不用在乎高度，具體高度由網頁內容自動撐開。上面 meta 標籤中內容的含義如下：

• viewport：即視口，表示網頁的可視區域；
• width：控制 viewport 的大小，可以指定一個具體的值，例如 600，也可以是由關鍵字組成的特殊值，例如 device-width 就表示裝置的寬度；
• initial-scale：表示初始縮放比例，也就是頁面第一次載入時的縮放比例；
• maximum-scale：表示允許使用者縮放的最大比例，範圍從 0 到 10.0；
• minimum-scale：表示允許使用者縮放到最小比例，範圍從 0 到 10.0；
• user-scalable：表示使用者是否可以手動縮放，“yes”表示允許縮放，“no”表示禁止縮放。

2.編寫新的css樣式（滿足條件時，使用新得css）：

// 螢幕尺寸小於480px使用的樣式
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}