• JS媒体查询


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

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

    还有两个方法

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

    使用:

    var result = window.matchMedia('(max-418px)'); //要加括号
    var result2 = window.matchMedia('(max-768px)');
    var result3 = window.matchMedia('(max-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-418px)'), //和CSS一样,也要注意顺序!
            window.matchMedia('(max-768px)'),
            window.matchMedia('(max-992px)'),
            window.matchMedia('(max-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如何使用媒体查询

  • 相关阅读:
    洛谷P1196银河英雄传说
    NOIP2011普及组第三题瑞士轮(洛谷P1309)
    Dijkstra算法
    10.13做题——洛谷1449后缀表达式
    NOI题库(1.12.T3)甲流病人初筛
    10.12做题——NOI题库(1.13.T30)1的个数
    NOIP考试必备——随机数
    10.10做题——USACO1.2/洛谷1207回文平方数(Dual Palindromes)
    10.9做题——洛谷P1927防护伞
    10.9做题——USACO1.2/洛谷1206回文平方数(Palindromic Squares)
  • 原文地址:https://www.cnblogs.com/Grani/p/10441810.html
Copyright © 2020-2023  润新知