JS实现媒体查询功能

Web开发
  182字   1分钟

记录一下用JS实现媒体查询功能的代码。

用JS实现

遇到过window.οnresize方法失效的情况，用Jquery方式实现没问题。

1
2
3
4
5
6
7
8
9
10
// 窗体变化监听
window.οnresize=function(){
	if(document.body.clientWidth <= 768){
	}else if(document.body.clientWidth <= 900){
	}else if(document.body.clientWidth <= 1200){
	}
	...
	if(document.body.clientHeight <= 768){
	}
}

用Jquery实现

1
2
3
4
5
6
7
8
9
10
// 窗体变化监听
$(window).resize(function(){
	if($(window).width() <= 768){
	}else if($(window).width() <= 900){
	}else if($(window).width() <= 1200){
	}
	...
	if($(window).height() <= 768){
	}
})

其他说明

如果结合媒体查询时会设置元素是否可见，通过css设置元素display=none，可防止页面闪烁问题。

评论