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)
複製代碼

總結: