CSS用@media媒體查詢進行響應式設計，什麼是媒體查詢

隨著網路的發展，各種智慧型手機，平板這些行動裝置隨處可見。那麼如何讓我們的網站在各種行動裝置上都能合理佈局呢？為每個裝置寫一套程式碼麻煩且工作量大。那麼聰明的程式設計師會用一套程式碼，就能讓網站在不同大小的裝置上合理顯示。因此，響應式設計模型就產生了，其核心就是「媒體查詢」。

一、什麼是媒體查詢

媒體查詢可以讓我們依照裝置顯示器的特性（如視窗寬度、螢幕比例、裝置方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個偵測媒體特性的條件式所組成。媒體查詢中可用於偵測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的某些輸出裝置客製化顯示效果。

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。 @media 可以為不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

二、@media 媒體查詢的使用

a.要在html文件中加入以下程式碼，用來相容行動裝置的顯示效果

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

width=device-width:寬度等於目前裝置的寬度
initial-scale=1：初始的縮放比例（預設為1）
maximum-scale=1：允許使用者縮放到得最大比例（預設為1）
user-scalable=no：使用者無法手動縮放

b.在CSS檔案中寫入響應式媒體查詢

基本語法：@media 媒體類型  and （媒體特徵）{樣式}

範例1：

@media screen and (max-width:480px){
body {
background:red
  }
}

 表示：當螢幕小於或等於480px時,頁面中的背景顏色變成紅色。

範例2：

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

表示：當螢幕大於或等於900px時,頁面中的字體大小變成20px。

範例3：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

表示：當畫面在600px~900px之間時，body的背景色為「#f5f5f5」。

總結：以上介紹了什麼是媒體查詢@media，並舉例介紹媒體查詢的使用方法。

以上是CSS用@media媒體查詢進行響應式設計，什麼是媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！