调整窗口大小事件

window.onresize = function(){};
window.addEventListener('resize', function() {});

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

注意：只要窗口大小发生像素变化，就会触发这个事件。

我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<script type="text/javascript">
			window.addEventListener('load', function() {
				var div = document.querySelector('div');
				window.addEventListener('resize', function() {
					if (window.innerWidth <= 800) {
						div.style.display = 'none';
					} else {
						div.style.display = 'block';
					}
				})
			})
			
		</script>
	</body>
</html>

当窗口宽度缩小至小于等于800时，就隐藏div元素，反之显示div。

版权声明：本文为m0_62962469原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。