自定义页面宽度更改时如何更改 js 中的元素大小 - Javascript

当我们在开发一个网页时，我们需要根据不同的设备屏幕尺寸来调整页面元素的大小和位置。在Javascript开发中，我们可以使用以下几种方法实现：

1. 使用CSS媒体查询

CSS媒体查询可以根据不同的屏幕宽度和高度，为不同的设备设置不同的样式规则。在Javascript中，我们可以使用媒体查询的方式来动态设置元素的样式。

if (window.matchMedia("(min-width: 768px)").matches) {
  // 如果当前窗口宽度大于等于768px
  document.getElementById("demo").style.fontSize = "20px";
} else {
  // 如果当前窗口宽度小于768px
  document.getElementById("demo").style.fontSize = "16px";
}

2. 使用window对象的resize事件

当浏览器窗口大小发生改变时，我们可以通过监听window对象的resize事件来动态改变元素的样式。

window.addEventListener("resize", function() {
  // 当窗口大小改变时执行的代码
  if (window.innerWidth >= 768) {
    // 当窗口宽度大于等于768px
    document.getElementById("demo").style.fontSize = "20px";
  } else {
    // 当窗口宽度小于768px
    document.getElementById("demo").style.fontSize = "16px";
  }
})

3. 使用vw和vh单位

vw和vh是相对于当前视口宽度和高度的单位，在移动设备上更常用。使用vw和vh单位可以让元素随着屏幕大小变化而变化。

#demo {
  font-size: 5vw; /* 当前视口宽度的5%作为字体大小 */
}

上述是几种实现动态更改元素大小的方法，我们可以根据实际情况选择合适的方式来应用。