当前位置：首页 > JavaScript

原声js实现响应式布局

2026-04-04 22:34:41JavaScript

使用媒体查询（Media Queries）

通过CSS的@media规则实现响应式布局是最常见的方法。虽然CSS是核心，但可以通过JavaScript动态添加或修改媒体查询。

// 动态创建style元素并插入媒体查询
const style = document.createElement('style');
style.innerHTML = `
  @media (max-width: 600px) {
    body { background-color: lightblue; }
  }
`;
document.head.appendChild(style);

监听窗口大小变化

通过window.addEventListener监听resize事件，实时调整布局或样式。

function handleResize() {
  if (window.innerWidth < 768) {
    document.body.style.fontSize = '14px';
  } else {
    document.body.style.fontSize = '16px';
  }
}

window.addEventListener('resize', handleResize);
// 初始化时执行一次
handleResize();

动态加载资源

根据屏幕尺寸或设备特性，动态加载不同的JavaScript或CSS文件。

function loadResponsiveResource() {
  const screenWidth = window.innerWidth;
  const script = document.createElement('script');

  if (screenWidth < 768) {
    script.src = 'mobile.js';
  } else {
    script.src = 'desktop.js';
  }

  document.body.appendChild(script);
}

loadResponsiveResource();

使用`matchMedia` API

window.matchMedia提供更灵活的媒体查询检测，可监听条件变化。

const mediaQuery = window.matchMedia('(max-width: 600px)');

function handleTabletChange(e) {
  if (e.matches) {
    console.log('屏幕宽度小于600px');
  } else {
    console.log('屏幕宽度大于600px');
  }
}

// 添加监听
mediaQuery.addListener(handleTabletChange);
// 初始检查
handleTabletChange(mediaQuery);

元素尺寸监控

通过ResizeObserver监听DOM元素尺寸变化，实现局部响应式。

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width = entry.contentRect.width;
    if (width < 300) {
      entry.target.style.flexDirection = 'column';
    } else {
      entry.target.style.flexDirection = 'row';
    }
  }
});

observer.observe(document.getElementById('responsive-container'));

计算并应用比例

通过计算窗口与设计稿的比例，动态调整元素尺寸。

原声js实现响应式布局

function scaleElements() {
  const baseWidth = 1920; // 设计稿基准宽度
  const currentWidth = window.innerWidth;
  const scale = currentWidth / baseWidth;

  document.querySelector('.scalable-element').style.transform = `scale(${scale})`;
}

window.addEventListener('resize', scaleElements);
scaleElements();