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：用戶不能手動縮放

二、怎樣在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背景色

 

@media語法：

1. @media[mediatype][and|not|only]([mediafeature]){
2. /*css code*/
3. }

常用mediatype

all            用於所有設備

print        用於打印機和打印預覽

screen    用於電腦屏幕、平板、智能手機等

常用mediafeature

max-width        輸出設備中頁面最大可視區域寬度 小於這個width時，其中的css起作用

max-height         輸出設備中頁面最大可視區域高度   小於這個height時，其中的css起作用

min-width        輸出設備中頁面最小可視區域寬度  大於這個width時，其中的css起作用
min-height         輸出設備中頁面最小可視區域高度  大 於這個height時，其中的css起作用

-webkit-min-device-pixel-ratio         設備上最小的物理像素和設備獨立像素比，簡稱 設備像素比（ DPR   ）

 

遇到問題繼續補充~~~，over

 

 

 

 

 

 

 

 

來自為知筆記(Wiz)