如何用BOM实现页面的响应式布局？

响应式布局通常依靠CSS中的媒体查询来实现，但媒体查询只能基于预设断点切换样式，对于那些需要根据视口尺寸动态调整脚本行为、按需加载资源或联动多处样式的场景，BOM（Browser Object Model）提供了更灵活的入口。BOM的核心是window对象，它暴露了视口宽度、高度、设备像素比以及媒体查询监听等能力。通过合理使用这些接口，可以在不依赖任何框架的情况下构建精确的响应式方案。

用window.innerWidth和resize事件感知视口变化

window.innerWidth返回浏览器窗口内部宽度，包含滚动条但不包含浏览器边框。与之相对的outerWidth则包含浏览器窗口边框。实际布局中通常关心innerWidth，它对应CSS视口宽度。通过监听resize事件，可以获取最新的innerWidth，并据此更新页面元素的状态。下面的示例展示如何根据视口宽度切换导航栏的折叠状态。

function updateLayout() {
  const width = window.innerWidth;
  const nav = document.querySelector('.nav');
  if (width < 768) {
    nav.classList.add('collapsed');
  } else {
    nav.classList.remove('collapsed');
  }
}

window.addEventListener('resize', updateLayout);
// 页面加载完成后先执行一次
updateLayout();

resize事件在窗口尺寸改变期间会持续触发，触发频率取决于浏览器，通常每秒几十次。如果回调中执行大量DOM操作或者重排计算，会明显影响性能。因此需要引入防抖（debounce）或节流（throttle）策略。防抖是在事件停止触发一段时间后再执行，适合只需最终布局稳定后执行的任务；节流是保证固定时间间隔执行一次，适合需要实时反馈的场景。下面的防抖版本可以避免在拖拽窗口过程中反复执行重排。

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleResize = debounce(function() {
  const width = window.innerWidth;
  document.documentElement.style.setProperty('--viewport-width', width + 'px');
  console.log('执行防抖后的布局更新');
}, 200);

window.addEventListener('resize', handleResize);

另一个需要注意的问题是resize在移动端浏览器中可能因为地址栏收缩、软键盘弹出而频繁触发，使用防抖后这些瞬时变化不会引发多余的布局计算。结合window.devicePixelRatio可以进一步判断设备是高清屏还是普通屏，为图片和Canvas渲染选择合适的倍率。

通过window.matchMedia精确匹配媒体查询

与resize每次都回调不同，window.matchMedia允许传入一条媒体查询字符串，并返回一个MediaQueryList对象。该对象的matches属性表示当前视口是否满足查询条件。更强大的是，可以监听该对象的change事件，它只在查询结果发生切换时触发，而不是窗口尺寸每变化一次都触发。这样在断点临界处执行切换逻辑时更干净。

const mobileQuery = window.matchMedia('(max-width: 768px)');

function handleMediaChange(event) {
  if (event.matches) {
    document.body.classList.add('mobile-layout');
    // 移动端逻辑：收起侧边栏
  } else {
    document.body.classList.remove('mobile-layout');
    // 桌面端逻辑：展开侧边栏
  }
}

// 初始状态同步
handleMediaChange(mobileQuery);

// 监听断点跨越
mobileQuery.addEventListener('change', handleMediaChange);
// 兼容旧版Safari等：mobileQuery.addListener(handleMediaChange);

matchMedia的优势在于它直接复用了CSS媒体查询语法，开发者无需维护一套独立的尺寸判断常量。比如要同时处理宽度和高度条件，可以写(min-width: 1024px) and (orientation: landscape)。当断点较多时，为每个断点创建一个MediaQueryList并监听change，能构建出清晰的状态机。需要留意的是，旧版浏览器使用addListener和removeListener，现代浏览器推荐addEventListener和removeEventListener，两者可以同时保留以兼容。

响应式布局中的性能优化与资源加载

响应式布局不只是样式的变化，更关键的是避免移动端加载不必要的资源。通过matchMedia或者resize配合防抖，可以按需加载脚本、样式或者图片。例如，移动端不加载大型交互组件，只在桌面端动态创建<script>标签。下面示例根据视口宽度决定是否加载一个体积较大的图表库。

const desktopQuery = window.matchMedia('(min-width: 1024px)');

function loadChartLibrary() {
  const script = document.createElement('script');
  script.src = 'https://cdn.bbccb.com/chart.min.js';
  script.async = true;
  document.head.appendChild(script);
}

function handleDesktopChange(event) {
  if (event.matches && !window.chartLibLoaded) {
    loadChartLibrary();
    window.chartLibLoaded = true;
  }
}

desktopQuery.addEventListener('change', handleDesktopChange);
handleDesktopChange(desktopQuery);

除了脚本加载，响应式图片也可以借助BOM动态处理。根据设备像素比和视口宽度，选择不同分辨率的图片源，再设置到<img>元素的src属性上。这样能避免在手机上加载桌面级大图。设备像素比可以通过window.devicePixelRatio获取，当DPR大于2时加载两倍图，否则加载标准图。

在实际项目中，将BOM获取的视口信息与CSS变量结合，可以做到非常灵活的样式控制。例如在根元素上设置--current-width变量，然后在CSS中通过calc()进行动态计算。不过频繁设置CSS变量可能引起样式重算，建议在防抖后统一更新。

function setResponsiveVars() {
  const root = document.documentElement;
  const width = window.innerWidth;
  const height = window.innerHeight;
  root.style.setProperty('--viewport-width', width + 'px');
  root.style.setProperty('--viewport-height', height + 'px');
}

window.addEventListener('resize', debounce(setResponsiveVars, 150));
setResponsiveVars();

移动端横竖屏与设备像素比适配

移动端响应式布局还需要处理横竖屏切换。窗口尺寸变化会触发resize，但有些浏览器还提供orientationchange事件，它专门在横竖屏切换时触发。通过监听这个事件，可以在横屏时调整导航或网格布局，避免内容被拉伸。需要注意的是，window.orientation属性虽然可以使用，但已经被标准废弃，更推荐使用screen.orientation对象。

function handleOrientationChange() {
  const type = screen.orientation ? screen.orientation.type : '';
  if (type.includes('landscape')) {
    document.body.classList.add('landscape');
    // 横屏时显示两列布局
  } else {
    document.body.classList.remove('landscape');
    // 竖屏时恢复单列布局
  }
}

window.addEventListener('orientationchange', handleOrientationChange);

设备像素比（DPR）对响应式图片和Canvas绘制精度影响很大。同一CSS像素在DPR为2或3的设备上对应多个物理像素，如果直接按CSS像素绘制，位图资源会模糊。通过BOM获取DPR后，可以动态拼接图片URL加载高清资源，或者设置Canvas的width和height为CSS尺寸乘以DPR，再用CSS缩放回原始尺寸。下面的示例展示了DPR感知的Canvas初始化。

function setupCanvas(canvas) {
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  canvas.style.width = rect.width + 'px';
  canvas.style.height = rect.height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
  return ctx;
}

总体上，BOM为响应式布局提供了CSS媒体查询之外的编程接口。window.innerWidth适合连续变化时的自定义逻辑，matchMedia适合断点触发式的状态切换，而orientationchange和devicePixelRatio则补充了移动端特有的适配维度。将这几个API组合使用，可以实现更精细、更高效的响应式方案。当然，纯CSS媒体查询仍然是静态样式切换的首选，当需要动态行为配合时，再引入BOM控制会更合理。

BOM响应式布局matchMedia修改时间：2026-09-18 03:40:34