如何用JavaScript媒体查询根据视口尺寸调整HTML元素位置

现有代码的核心问题 #

1. jQuery与原生DOM混用错误：$("#index-container")是jQuery对象，不能直接使用.style属性，需改用jQuery的.css()方法，或转换为原生DOM元素操作。
2. 语法错误：screen函数未闭合大括号，会导致代码无法正常执行。
3. 媒体查询条件重叠：多个查询范围存在交叉场景，会导致匹配逻辑混乱，需按从严格到宽松的顺序定义，或调整条件避免重叠。
4. 缺少窗口resize监听：未绑定窗口大小变化事件，无法在用户调整窗口时重新触发位置计算。

修正后的完整代码 #

// 定义媒体查询变量（放在全局作用域，方便监听函数直接访问）
const smallScreen = window.matchMedia("(max-height: 400px) and (max-width: 150px)");
const smallMedScreen = window.matchMedia("(max-height: 500px) and (max-width: 250px)");
const medScreen = window.matchMedia("(max-height: 450px) and (max-width: 400px)");
const medLargeScreen = window.matchMedia("(max-height: 550px) and (max-width: 500px)");
const largeScreen = window.matchMedia("(min-height: 600px) and (min-width: 600px)");

// 调整容器位置的核心函数
function adjustContainerPosition() {
  const container = $("#index-container");
  if (smallScreen.matches) {
    container.css("top", "20vh");
  } else if (smallMedScreen.matches) {
    container.css("top", "30vh");
  } else if (medScreen.matches) {
    container.css("top", "40vh");
  } else if (medLargeScreen.matches) {
    container.css("top", "60vh");
  } else if (largeScreen.matches) {
    container.css("top", "70vh");
  } else {
    // 处理所有条件不匹配的场景，设置默认值
    container.css("top", "50vh");
  }
}

// 页面初始化时执行一次
adjustContainerPosition();

// 绑定窗口resize事件，窗口调整时重新计算位置
window.addEventListener("resize", adjustContainerPosition);

// 可选：给每个媒体查询绑定change事件，状态切换时精准触发
smallScreen.addEventListener("change", adjustContainerPosition);
smallMedScreen.addEventListener("change", adjustContainerPosition);
medScreen.addEventListener("change", adjustContainerPosition);
medLargeScreen.addEventListener("change", adjustContainerPosition);
largeScreen.addEventListener("change", adjustContainerPosition);

关键说明 #

1. jQuery样式设置：改用container.css("top", "xxvh")符合jQuery API规范；若偏好原生DOM，可写成document.getElementById("index-container").style.top = "xxvh"。
2. 参数传递问题解决：无需给监听函数传递参数，将媒体查询变量定义在全局作用域，让核心函数直接访问即可，避免参数传递的繁琐。
3. 媒体查询优化：建议调整查询条件，比如按宽度从窄到宽、高度从低到高排序，确保每个场景仅匹配一个条件，避免逻辑混乱。
4. 双监听方案：同时绑定resize事件和媒体查询的change事件，既覆盖所有窗口调整场景，又能在查询状态切换时精准触发位置更新。

内容的提问来源于stack exchange，提问作者Laura Edwards