JS媒体查询

样式的改变使用C3的媒体查询
行为和功能的改变使用JS的媒体查询
matchMedia()方法参数可写任何一个CSS@media规则，返回的是新的MediaQueryList对象，该对象有两个属性

• media：查询语句的内容
• matches：检查查询结果，返回boolean

还有两个方法

• addListener()：添加一个新的监听器函数，查询结果改变时，调用指定回调
• removeListener()：删除之前添加的监听器，若不存在则不执行任何操作

使用:

var result = window.matchMedia('(max-width:418px)'); //要加括号
var result2 = window.matchMedia('(max-width:768px)');
var result3 = window.matchMedia('(max-width:992px)');
  if(result.matches) {
    console.log("超小屏幕(<=418)");
    //do something...
  }else if(result2.matches){
    console.log("小屏幕(>768&<=992)");
   //do something...
  }else if(result3.matches){
    console.log("中等屏幕(>992&<=1200)");
   //do something...
  }else{
    console.log("大屏幕(>1200)");
  }

但此方式只能是页面首次或重新加载时才生效，若要像CSS媒体查询一样随着页面大小改变做出反应，就要使用addListener()方法监听

 var sqls = [
        window.matchMedia('(max-width:418px)'), //和CSS一样，也要注意顺序！
        window.matchMedia('(max-width:768px)'),
        window.matchMedia('(max-width:992px)'),
        window.matchMedia('(max-width:1200px)')
    ]

    function mediaMatches() {
        if(sqls[0].matches){
            console.log('<=418'); //do something...
        }else if(sqls[1].matches){
            console.log('>418 & <=768'); // do something...
        }else if(sqls[2].matches){
            console.log('>768 & <=992'); // do something...
        }else if(sqls[3].matches){
            console.log('> 992 & <=1200'); // do something...
        }else {
            console.log('>1200');
        }
    }
    mediaMatches(); //页面首次加载

    for(var i = 0; i < sqls.length; i++){
        sqls[i].addListener(mediaMatches);
    }

为每个MediaQueryList对象添加监听器，每个对象查询结果只有ture和false，当某个对象的查询结果改变时都会调用指定回调函数mediaMatches，这样就可以在每次页面大小改变时执行某些行为

参考资料

Window.matchMedia()方法|菜鸟教程
js如何使用媒体查询

转载于:https://www.cnblogs.com/Grani/p/10441810.html