当前位置：首页 > JavaScript

原声js实现响应式布局

2026-01-31 06:33:47JavaScript

使用原生JavaScript实现响应式布局

响应式布局的核心是根据不同屏幕尺寸动态调整页面元素的样式。原生JavaScript可以通过监听窗口变化、操作DOM和修改CSS属性来实现。

监听窗口尺寸变化

通过window.addEventListener监听resize事件，在窗口尺寸变化时触发回调函数：

原声js实现响应式布局

window.addEventListener('resize', function() {
  const screenWidth = window.innerWidth;
  // 根据屏幕宽度执行不同操作
  if (screenWidth < 768) {
    // 移动端布局
  } else if (screenWidth >= 768 && screenWidth < 1024) {
    // 平板布局
  } else {
    // 桌面布局
  }
});

动态修改元素样式

使用JavaScript直接操作元素的style属性或修改class：

const element = document.getElementById('responsive-element');
function adjustLayout() {
  if (window.innerWidth < 600) {
    element.style.fontSize = '14px';
    element.classList.add('mobile-view');
  } else {
    element.style.fontSize = '18px';
    element.classList.remove('mobile-view');
  }
}
// 初始加载时执行一次
adjustLayout();
// 窗口变化时执行
window.addEventListener('resize', adjustLayout);

媒体查询的JavaScript替代方案

虽然CSS媒体查询更高效，但JavaScript可以实现更复杂的逻辑：

原声js实现响应式布局

function checkBreakpoint() {
  const breakpoints = {
    small: 576,
    medium: 768,
    large: 992,
    xlarge: 1200
  };

  const currentWidth = window.innerWidth;

  if (currentWidth < breakpoints.small) {
    // 超小屏幕逻辑
  } else if (currentWidth >= breakpoints.small && currentWidth < breakpoints.medium) {
    // 小屏幕逻辑
  }
  // 其他断点...
}

图片响应式处理

动态切换不同尺寸的图片源：

const responsiveImage = document.querySelector('.responsive-img');
function updateImageSource() {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    responsiveImage.src = 'small.jpg';
  } else {
    responsiveImage.src = 'large.jpg';
  }
}
window.addEventListener('resize', updateImageSource);
updateImageSource(); // 初始化

性能优化建议

避免在resize事件中执行过多操作，可以使用防抖(debounce)技术：

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

window.addEventListener('resize', debounce(function() {
  // 响应式逻辑
}, 250));