10分鐘回顧CSS媒體查詢

在摸了幾天魚以後,領導派活了.需求是寫一個響應式網站,兼容PC,Pad和手機.我一聽哭笑不得,這可是要了我的老命啊.都知道寫響應式頁面煩的很.無奈,既然領導要求,那就寫咯.在正式開幹之前,我找出以前記錄的相關筆記,想要先好好複習一下.當看到媒體查詢這一塊的內容時,發現了一些我腦海中沒有印象的知識點.於是正好趁着週末休息的時候,簡單梳理一下有關媒體查詢的相關知識點.等以後再想要複習的時候,看這篇文章就可以了.

今天的主角不是響應式頁面怎麼寫,這個話題有點廣,以後有時間再寫好了.今天我們就來聊一聊響應式佈局中很重要的一個點:媒體查詢.

媒體查詢查什麼?

媒體查詢:media屬性,可以針對不同的媒體類型或媒體功能

媒體功能

定義不同的樣式.通常在設計響應式頁面中,media屬性是非常有用的.我們可以將這個屬性設置在style標籤上.下面是一個媒體功能查詢,其作用是查詢屏幕的尺寸大小,應用不同的樣式.

<style media="(min-width: 1000px)">
  div {
    color: red;
  }
</style>
<style media="(max-width: 1000px">
  div {
    color: green;
  }
</style>

媒體類型

再來看一個媒體類型查詢

<style media="screen">
  div {
    color: red;
  }
</style>
<style media="print">
  div {
    color: green;
  }
</style>

查詢屏幕設備,其中screen 表示設備類型 通常我們的電腦,平板,手機等都屬於screen類型.其他的還有譬如print表示打印設備等(使用Ctrl+p 就可以調出來).不給值就是默認值,默認值是all.

邏輯操作符

當屏幕寬度在400到600px之間起作用,其中用到了and邏輯操作符,表示兩個條件都要滿足

<style media="screen and (min-width:400px) and (max-width:600px)"></style>

當是橫屏或者最大寬度爲768px的時候,用 , 逗號分隔符代表或者,表示只要是橫屏(定義是輸出設備中的頁面可見區域高度小於寬度)或者寬度小於768px就適用

<style media="screen and (orientation:landscape), screen and (max-width:768px)"></style>

當屏幕寬度在400到600px之間不起作用.注意了,not 關鍵字只能用於否定整個媒體查詢,而不能用於否定單個表達式,所以在使用的時候,它一般放在最開頭

<style media="not screen and (min-width:400px) and (max-width:600px)"></style>

上面講到了and, ,(or的意思) 和not 這三種邏輯操作符,除此之外還有only等.only的意思就是隻在支持媒體查詢的瀏覽器中使用.真實場景是,在支持媒體查詢的瀏覽器中,加不加only都是一樣的,但在不支持媒體查詢的瀏覽器中,因爲它不認識only,所以會將本條媒體查詢直接忽略掉.用法如下

<style media="only screen and (min-width:400px) and (max-width:600px)"></style>

media用在啥地方?

同樣 media 屬性也可以用在link標籤中 此時不管媒體查詢是否符合,css文件都會被下載下來

<link rel="stylesheet" href="css/common.css">
<link media="(min-width:1000px)" rel="stylesheet" href="css/pc.css">
<link media="(max-width:750px)" rel="stylesheet" href="css/mobile.css">
<link media="screen" rel="stylesheet" href="css/screen.css">
<link media="print" rel="stylesheet" href="css/print.css">

對於基於html的樣式表,在通過media屬性對媒體做出限制時,其用法在link和style元素中是一樣的.
而在樣式表中,也可以在 @import 規則上限制媒體
html頁面引入一個index.css文件,其他所有的css文件都在這個index.css文件中引入,引入外部文件時的媒體查詢

@import url(./common.css);
@import url(./pc.css) (min-width:1000px);
@import url(./mobile.css) (max-width:750px);

此外還有@media塊語法,也是我們平時使用的比較多的,它允許我們在同一個樣式表中爲多個媒體定義不同的樣式

.div1 {
    background-color: orange;
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
    .div1 {
        background-color: red;
    }
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
    .div1 {
        background-color: green;
    }
}
@media only screen and (max-width: 800px){
    .div1 {
        background-color: blue;
    }
}

上面的代碼,在我們不停縮放瀏覽器的寬度時,可以看到不同的效果.

實現圖片的自適應

有時,我們會有這樣的需求,在不同的設備或者不同寬度的頁面中展示不同的圖片,或大小不一樣,或內容不一樣.那麼要怎麼做到呢?這裏提供一種思路:

<picture>
    <source srcset="images/horizontal.jpg" media="(min-width: 800px)">
    <source srcset="images/vertical.jpg" media="(min-width: 600px)">
    < img src="images/default.jpg" alt="">
</picture>

當設備寬度大於800px的時候,使用橫圖(horizontal.jpg),當介於600到800px之間時,使用豎圖(vertical),當小於600px的時候,使用img標籤中src指定的默認圖(default).
picture元素通過包含0個或多個source元素和一個img元素來爲不同的場景提供不同的圖片.這裏我們結合了媒體查詢,實現在不同寬度下展示不同的圖片,當沒有符合條件的場景時,使用默認的圖片.
更多有關picture標籤的用法:戳我

使用JavaScript進行媒體查詢

語法如下:

mqList = window.matchMedia(mediaQueryString)  // 參數爲一個被用於媒體查詢解析的字符串 返回一個新的用來媒體查詢的MediaQueryList對象

如:

const obj = window.matchMedia('(max-width:600px)')
console.log(obj)

結果如下圖:

可以通過 matches 屬性來判斷目前的 document 是否匹配媒體查詢.此時因爲我的頁面寬度大於600px,所以matches屬性的結果爲false
此外如果我們想要監聽查詢結果值的變化的話,我們可以給這個返回對象註冊監聽器,添加回調函數,當改變媒體查詢的狀態時.觸發回調.

const obj = window.matchMedia('(max-width:600px)')
console.log(obj)
const callback = e => e.matches ? console.log('greater than 600px') : console.log('less than 600px')
obj.addListener(callback)

當瀏覽器的寬度從600px+到600px- 或者 從600px-到600px+ 的時候,可以看到控制檯打印出了相對應的提示.當然,若是不想再繼續監聽,可以使用 removeListener 來移除.

obj.removeListener(callback)

總結: