京东网站推广方式,生产管理网站开发,上海快速建站平台,邯郸房地产市场信息网样式的改变使用C3的媒体查询 行为和功能的改变使用JS的媒体查询 matchMedia()方法参数可写任何一个CSSmedia规则#xff0c;返回的是新的MediaQueryList对象#xff0c;该对象有两个属性 media#xff1a;查询语句的内容matches#xff1a;检查查询结果#xff0c;返回boo…样式的改变使用C3的媒体查询 行为和功能的改变使用JS的媒体查询 matchMedia()方法参数可写任何一个CSSmedia规则返回的是新的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(小屏幕(768992));//do something...}else if(result3.matches){console.log(中等屏幕(9921200));//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
