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

今天的文章js使用媒体查询分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。