1,window.onresize 时调整窗口大小加载事件，当触发时就调用的处理<!DOCTYPE html>
下面，当窗口大小改变时，控制台就会输出窗口的宽度，并打印出 “ 变化了”。 window.innerWidth 当前屏幕的宽度
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> window.addEventListener('load', function() { var div = document.querySelector('div'); window.addEventListener('resize', function() { console.log(window.innerWidth); console.log('变化了'); }) }) </script> <div></div> </body> </html>
2,我们经常利用这个事件完成响应式布局
比如，当前屏幕宽度小于800时，就让页面中的某个元素隐藏，否则显示。
<script> 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>