多媒體查詢

@media 規則在 CSS2 中有介紹，針對不同媒體類型可以定制不同的樣式規則。

例如：你可以針對不同的媒體類型(包括顯示器、便攜裝置、電視機，等等)設定不同的樣式規則。

• 在内部執行

  通過@media可以針對不同螢幕大小定義不同樣式的網頁，頁面會根據浏覽器 長寬 來渲染頁面。

首先我們在使用Media的時候需要先設定下面這段代碼，來相容移動裝置的展示效果：

這段代碼的幾個參數解釋：

• **width = device-width：**寬度等于目前裝置的寬度
• **initial-scale：**初始的縮放比例（預設設定為1.0）
• **minimum-scale：**允許使用者縮放到的最小比例（預設設定為1.0）
• **maximum-scale：**允許使用者縮放到的最大比例（預設設定為1.0）
• **user-scalable：**使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面

執行個體1：當螢幕的可視視窗寬度小于等于480px時為lightgreen，當大于等于481px和小于等于900px時，為red。

body {
    background-color: pink;
}

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
@media screen and (min-width:481px) and (max-width: 900px) {
    body {
        background-color: red;
    }
}
           

• 在外部執行

<link rel="stylesheet" type="text/css" href="css/css1.css" media="screen and (min-width:901px)"/>
<link rel="stylesheet" type="text/css" href="css/css2.css" media="screen and (min-width:580px) and (max-width:900px)" />