css媒體查詢有什麼用

css媒體查詢的作用：媒體查詢可以讓我們根據裝置顯示器的特性，如視窗寬度、螢幕比例、裝置方向等，為其設定css樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。

本教學操作環境：windows10系統、css3版，此方法適用於所有品牌電腦。

（學習影片分享：css影片教學）

css媒體查詢的作用：

1、什麼是媒體查詢

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

2、如何在CSS檔案中引入媒體查詢

媒體查詢寫在CSS樣式程式碼的最後，CSS是層疊樣式表，在同一特殊性下，靠後的的樣式會重疊前面的樣式。

3、怎麼使用media

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

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

ps：

width =device-width:寬度等於目前裝置的寬度

initial-scale=1：初始的縮放比例（預設為1）

maximum-scale=1：允許使用者縮放到得最大比例（預設為1）

user-scalable=no：使用者無法手動縮放

#4、怎樣在CSS檔案中寫CSS響應式媒體查詢 

範例：

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

ps：

該段媒體查詢的意思是：當裝置螢幕寬度在320px－720px之間時，媒體查詢中body的背景色（background-color:red;）會重疊先前的body背景色，當裝置螢幕寬度在320px以下時，媒體查詢中body的body背景色（background-color:blue;）會重疊先前的body背景色。

相關推薦：CSS教學

#

以上是css媒體查詢有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！