如何使用jQuery在HTML内容加载完成后调用媒体查询

以下是两类常见需求的实现方式： #

场景1：DOM加载完成后，根据媒体查询匹配状态执行JS逻辑 #

可以配合window.matchMediaAPI实现，该API可以检测当前视口是否匹配指定的媒体查询规则。

jQuery版本（基于$(document).ready） #

$(document).ready(function() {
  // 定义和需求一致的媒体查询规则
  const mediaQuery = window.matchMedia('only screen and (min-width: 1200px)');
  // 页面加载完成后立即执行一次判断
  handleMediaMatch(mediaQuery);
  // 可选：监听视口尺寸变化，后续尺寸变动时自动触发逻辑
  mediaQuery.addEventListener('change', handleMediaMatch);
});

function handleMediaMatch(e) {
  if (e.matches) {
    // 视口宽度≥1200px时的逻辑，比如修改元素样式、初始化大屏专属组件等
    console.log('匹配大屏媒体查询');
    // 示例：手动设置容器宽度
    // $('.main_container').css('width', '1200px');
  } else {
    // 视口宽度<1200px时的逻辑
    console.log('不匹配大屏媒体查询');
  }
}

原生JS版本（替代document.ready） #

如果不用jQuery，可以用原生DOMContentLoaded事件实现相同效果：

document.addEventListener('DOMContentLoaded', function() {
  const mediaQuery = window.matchMedia('only screen and (min-width: 1200px)');
  handleMediaMatch(mediaQuery);
  mediaQuery.addEventListener('change', handleMediaMatch);
});

function handleMediaMatch(e) {
  const mainContainer = document.querySelector('.main_container');
  if (e.matches) {
    mainContainer.style.width = '1200px';
  } else {
    mainContainer.style.width = '100%';
  }
}

场景2：DOM加载完成后才让媒体查询样式生效 #

如果你希望对应媒体查询的CSS规则不要提前生效，要等HTML内容全部加载完成后再应用，可以动态注入样式：

$(document).ready(function() {
  const styleEl = document.createElement('style');
  styleEl.textContent = `
    @media only screen and (min-width: 1200px){
      .main_container {
        width: 1200px;
      }
    }
  `;
  document.head.appendChild(styleEl);
});

补充说明 #

CSS原生的媒体查询本身不需要JS触发，只要样式被正常加载到页面，就会自动根据视口尺寸匹配生效。仅当你需要结合JS逻辑、或者要控制样式生效时机时，才需要用到上述JS方案。

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