媒體查詢

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

2. css2中media查詢：

通過<link>標籤的media屬性爲樣式表指定設備類型：

比如：

（1）設備最大寬度是800px時，加載demo.css文件樣式

<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">

(2)500px-800px之間的設備：

<link rel="stylesheet" media="screen and (max-width:800px) and (min-width:500px)" href="./demo.css">

(3)最小寬度500px時：

<link rel="stylesheet" media="screen and (min-width:500px)" href="./demo.css">

(4)在非打印設備下：

<link rel="stylesheet" media="not print and (max-width:800px)" href="./demo.css">

注意：not 邏輯操作符，必須用於開頭，且會否定整個media聲明。上述代碼表示：not (print and max-width:800px) 

比如：不在（screen 且 最大寬度是800px）

<link rel="stylesheet" media="not screen and (max-width:800px)" href="./demo.css">

 上述代碼在“screen且寬度大於800px”的情況下，會加載“demo.css”文件。

（5）orientation：portrait

指定輸出設備中的頁面可見區域高度大於或等於寬度（height >= width）

顯示屏縱向放置

<link rel="stylesheet" media="screen and (orientation:portrait)" href="./demo.css">

（6）或邏輯操作符 ,

<link rel="stylesheet" media="screen and (orientation:portrait), print and (min-width:6in)" href="./demo.css">

表示：寬度小於等於高度的屏幕 或 最小寬度6英寸的打印設備 會加載demo.css樣式

3. css3的media查詢

特點：css樣式中，不同情況下，標籤的類選擇器加載不同的樣式

    <style>
        @media screen and (max-width:800px) and (min-width:500px){
            div{
                width: 100px;
                height: 100px;
                background-color: green;
            }
            span{
                color: red;
            }
        }
        @media screen and (max-width:500px){
            div{
                width: 200px;
                height: 200px;
                background: blue;
            }
            span{
                color: pink;
            }
        }
    </style>

當然，該css樣式可以採用link標籤將外部css文件引入的方式，可以將css樣式寫在一個css文件中引入，而不是在800px下，引入demo1.css文件，在600px下引入demo2.css文件。

4. 媒體類型：screen（電腦、手機、平板等屏幕），print（打印設備），all（所有設備）

5. 媒體特性：基本上只用到與width屬性相關的屬性，比如：max-width（最大寬度）、min-width（最小寬度）、width（渲染寬度）、device-width（設備寬度）

6. 通常情況下，px是相對單位，但是在該標籤中，如下設置，px是絕對單位。即不同設備下，都是這麼大。

實例：旋轉木馬的項目中，在瀏覽器中查看和在我自己手機上查看都是一樣大。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7. 頁面縮放的問題：

<meta name="viewport" content="width=device-width, initial-scale=1.0">中的initial-scale=1.0是縮放屬性

（1）頁面放大後，瀏覽器中的文檔效果會變大，但是瀏覽器的寬高並沒有變化，而文檔中的標籤元素會觸發media中寬度變小的效果，好像是：瀏覽器寬高變小了，而觸發了標籤寬度小的時候的css樣式。

（2）現在頁面的設計不允許縮放，因爲會重新佈局頁面：

<meta name="viewport" content="width=device-width, minimum-scale = 1.0, maximum-scale = 1.0, initial-scale = 1.0">

8. 媒體查詢尺寸

所以設置的常有：

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

在設置時，需要注意先後順序，不然後面的會覆蓋前面的樣式。