什麼是媒體查詢

一個媒體查詢由一個可選的媒體型別和零個或多個使用媒體功能的限制了樣式表範圍的表示式組成，例如寬度、高度和顏色。媒體查詢，新增自css3,允許內容的呈現針對一個特性範圍的輸出裝置而進行裁剪，不必改變內容的自身。@media可以針對不同 的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面。@media 是非常有用的。

@media的語法

@media (min-width: 700px) { ... }表示的是最小寬度是700px的時候，其css樣式

媒體查詢是布林值：它們要麼為true,要麼為false,如果整條語句為true, 那麼將應用樣式表，如果為false,則將忽略樣式表。

媒體型別都有哪些？

在做響應式佈局的時候，主要用到的媒體型別是screen。因為我們所作的產品如果需要pc端一份，app端一份的情況下，想使用一套開發程式碼的話，就需要使用到響應式佈局，這會就可能用到@media來實現。

媒體功能

關於媒體查詢的功能，大家可以參考一下 https://www.runoob.com/cssref/css3-pr-mediaquery.html這個網址，其功能過多，不一一詳解。只簡單介紹一下常用的媒體功能。

• min-height 定義輸出裝置中頁面最小可見區域高度。
• min-width 定義輸出裝置中的頁面最小可見區域寬度。
  -max-height 定義輸出裝置中的頁面最大可見區域高度。
  
  -max-width 定義輸出裝置中頁面最大可見區域寬度。

先來一個簡單的demo理解一下 什麼是媒體查詢.一個盒子在不同的螢幕下，其背景色是不同的。

<div class="demo">什麼是媒體查詢呢？</div>

其預設樣式：

.demo {
    width:100%;
    height:300px;
    background-color: aquamarine;
}

效果圖：不論視窗如何縮放，其樣式不變。

想要在螢幕寬度最大時600的情況下，背景色是紅棕色

/* 在螢幕寬度最大是600px的情況下，樣式 */
@media screen and (max-width:600px) {
    .demo {
        background-color: brown;
    }
}
 

效果圖：當螢幕寬度大於600px的時候，背景色還是淺藍色，小於等於600px的時候，背景色是紅棕色

當螢幕最小寬度是600px的時候，背景色是藍紫色

@media screen  and (min-width: 600px){
    .demo {
        background-color: blueviolet;
    }
}

效果圖：當螢幕寬度大於600px的時候，背景色是紫色,當小於600px的時候，背景色變成預設色--藍綠色

注意：

@media需要寫在預設css樣式的後面，因為css樣式會覆蓋。

邏輯操作符

你可以使用邏輯操作符，包括not，and和only等，構成複雜的媒體查詢。

• and 關鍵字：用於合併多個媒體屬性或合併媒體屬性與媒體型別。
  例如：在橫屏的時候，可視區寬度不小於700px的時候，生效。

@media (min-width:700px) and (operation: landscape) {....}

• 逗號分隔列表
  媒體查詢中使用逗號分隔效果等同於or邏輯操作符。當使用逗號分隔的媒體查詢時，如果任何一個媒體查詢返回真，樣式就是有效的。逗號分隔的列表中每個查詢都是獨立的，一個查詢中的操作符並不影響其他的媒體查詢。這意味著逗號媒體查詢列表能夠作用於不同的媒體、型別和狀態 。

@media (max-width:700px), (operation: landscape) {....}

在是橫屏或者可視區寬度最大是700px的時候，都會生效。只要滿足這兩個條件中的一個，該媒體查詢下的樣式，就會生效。

• not關鍵字只應用於整個媒體查詢，在媒體查詢為假的時候，返回真。在逗號媒體查詢列表中，not僅會否定它應用到媒體查詢上而不影響其他的媒體查詢，not關鍵字僅能應用於整個查詢，而不能單獨應用於一個獨立的查詢。

monochrome--黑白

滿足於所有不是黑白的裝置的樣式表
@media not all and (monochrome) { ... }

等價於

@media not (all and (monochrome)) { ... }

而不是等價於(因為：：：not關鍵字只應用於整個媒體查詢)

@media (not all) and (monochrome) { ... }

在逗號媒體查詢列表中，使用not

@media not screen and (color), print and (color)

等價於(在逗號媒體查詢列表中，not僅會否定它應用到媒體查詢上而不影響其他的媒體查詢)

@media (not (screen and (color))), print and (color)

• only關鍵字：防止老舊的瀏覽器不支援帶媒體屬性的查詢而應用到給定的樣式。如果以前的瀏覽器不支援媒體查詢，所以樣式就會被忽略。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

相容性

表格中的數字表示支援@media規則的第一個瀏覽器的版本號.。

推薦幾個響應式佈局的網站,大家可以去看一下。

https://www.byton.com
https://compodoc.a