自动检测浏览器大小调整并更改活动元素

以下是一个使用JavaScript来自动检测浏览器大小并更改活动元素的示例代码：

HTML部分：

<div id="activeElement">活动元素</div>

JavaScript部分：

// 获取活动元素和窗口对象
var activeElement = document.getElementById('activeElement');
var windowWidth = window.innerWidth;

// 监听窗口大小改变事件
window.addEventListener('resize', function() {
  // 获取新的窗口宽度
  var newWindowWidth = window.innerWidth;
  
  // 如果窗口宽度发生了改变
  if (newWindowWidth !== windowWidth) {
    // 更新窗口宽度
    windowWidth = newWindowWidth;
    
    // 根据新的窗口宽度调整活动元素
    adjustActiveElement();
  }
});

// 初始调整活动元素
adjustActiveElement();

// 调整活动元素的函数
function adjustActiveElement() {
  // 获取当前窗口宽度
  var currentWindowWidth = window.innerWidth;
  
  // 根据窗口宽度调整活动元素样式
  if (currentWindowWidth >= 1200) {
    activeElement.style.fontSize = '24px';
  } else if (currentWindowWidth >= 768) {
    activeElement.style.fontSize = '18px';
  } else {
    activeElement.style.fontSize = '14px';
  }
}

这段代码会根据窗口大小的改变，自动调整活动元素的字体大小。在这个示例中，当窗口宽度大于等于1200px时，活动元素的字体大小为24px；当窗口宽度在768px到1200px之间时，活动元素的字体大小为18px；当窗口宽度小于768px时，活动元素的字体大小为14px。你可以根据需要修改调整活动元素的逻辑。