js使用媒體查詢

 前言：有時候，我們需要根據媒體查詢，判斷用戶窗口的改變，從而控制一些代碼的變化。樣式的改變，通過CSS3的媒體查詢；行爲和功能的改變使用JS的媒體查詢。

一、定義和用法

       matchMedia()返回一個新的MediaQueryList對象，表示指定的媒體查詢字符串解析後的結果。

       matchMedia()方法的值可以是任何一個CSS@media規則的特性，如min-height,min-width,orientation等。

      MediaQueryList對象有以下兩個屬性：

•  media:查詢語句的內容。
• matches:用於檢測查詢的結果，如果文檔匹配media query列表，值爲true，否則爲false.

    MediaQueryList對象還可以監聽事件。通過監聽，在查詢結果發生變化時，就調用指定的回調函數。

    還有兩個方法：

•  addListener():添加一個新的監聽函數，查詢結果改變時，調用指定回調；
• removeListenter():刪除之前添加的監聽器，若不存在則不執行任何操作。

二、js部分的運用

//根據媒體查詢，判斷窗口大小start
function myFunction(x) {
   if (x.matches) { // 媒體查詢
        $('#pdf-popTF').css({ 'transform': 'translate(-20%,0px) scale(' + initial + ')' });
   } else {
        $('#pdf-popTF').css({ 'transform': 'translate(0%,0px) scale(' + null + ')' });
   }
 }
 var x = window.matchMedia("(max-width: 700px)")
 myFunction(x) // 執行時調用的監聽函數
 x.addListener(myFunction) // 狀態改變時添加監聽器
 //根據媒體查詢，判斷窗口大小end

  注意：①如果只使用matches屬性，此方式只能在頁面首次或者重新加載時才生效，若要像CSS媒體查詢一樣隨着頁面大小改變做出反應，就要使用addListener()方法監聽；

             ②本文案例中，就是使用了ddListener()方法監聽，爲每個MediaQueryList對象添加監聽器，每個對象查詢結果只有true和false，當某個對象的查詢結果改變時，都會調用指定回調函數mediaMatches，這樣就可以在每次頁面大小改變時執行某些行爲。

參考資料：JS媒體查詢  https://www.cnblogs.com/Grani/p/10441810.html

                  Window matchMedia() 方法/菜鳥教程  https://www.runoob.com/jsref/met-win-matchmedia.html