JS 检测屏幕大小变化 - Javascript

在网页中，我们经常需要根据屏幕大小来进行页面排版和元素布局的调整。而Javascript提供了一个简单的方法来检测屏幕大小的变化。

监听窗口大小变化

首先，我们需要监听窗口大小的变化。这可以使用window.addEventListener方法来实现。

window.addEventListener("resize", function() {
  // 窗口大小变化时执行的代码
});

上述代码会在窗口大小变化时触发一个回调函数。我们可以在回调函数中编写我们需要执行的代码，比如重新计算元素尺寸和位置。

获取屏幕大小信息

在编写响应式布局时，我们需要获取屏幕大小的信息。可以使用window.innerWidth和window.innerHeight来获取窗口的宽度和高度。

var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;

上述代码会将窗口的宽度和高度存储在变量screenWidth和screenHeight中。

自适应布局

上述方法可以帮助我们实现响应式布局，在不同大小的屏幕上自适应地调整页面布局。例如，我们可以使用CSS媒体查询和Javascript来实现不同屏幕大小下的导航菜单样式切换。

/*默认菜单样式*/
nav {
  display: none;
}

/*小屏幕菜单样式*/
@media (max-width: 768px) {
  nav {
    display: block;
  }
}

window.addEventListener("resize", function() {
  var screenWidth = window.innerWidth;
  
  if (screenWidth <= 768) {
    // 切换为小屏幕菜单样式
  } else {
    // 切换为默认菜单样式
  }
});

上述代码会在窗口大小变化时根据屏幕宽度自动切换菜单样式。

总结

通过监听窗口大小变化和获取屏幕大小信息，我们可以实现响应式布局和自适应功能。这是Web开发中非常重要的技术之一。