调整窗口大小事件
当调整window窗口大小的时候，就会触发window.onresize事件，调用事件处理函数。该事件有两种注册方式，如下所示。
// 方式1
window.onresize = function () {};
// 方式2
window.addEventListener('resize', function () {}); 接下来我们通过案例进行演示。利用页面加载事件和调整窗口大小事件完成响应式布局，示例代码如下。
1 <body>
2 <script>
3 window.addEventListener('load', function () {
4 var div = document.querySelector('div');
5 window.addEventListener('resize', function () {
6 if (window.innerWidth <= 800) {
7 div.style.display = 'none';
8 } else {
9 div.style.display = 'block';
10 }
11 });
12 });
13 </script>
14 <div style="width:200px;height:100px;background-color:pink;"></div>
15 </body>上述代码中，第5行代码绑定了resize调整窗口大小事件。第6~10行代码根据if条件语句进行判断，使用window.innerWidth获取当前屏幕的宽度，当屏幕小于等于800时隐藏div元素，否则显示该元素。
点击此处
隐藏目录
隐藏目录
