如何根据屏幕分辨率实现网站响应式布局适配？

1. CSS媒体查询（原生最简便方案） #

CSS原生支持通过aspect-ratio系列属性直接根据屏幕宽高比触发布局切换，这是实现需求最直接的方式，无需额外脚本。你可以自定义比值阈值，比如当垂直/水平分辨率比值（即高宽比）超过1.2时切换为竖向布局，低于1时用横向布局：

/* 横屏布局：宽 >= 高（高宽比 <= 1），适配笔记本等宽屏设备 */
@media (max-aspect-ratio: 1/1) {
  .page-container {
    display: flex;
    flex-direction: row;
    padding: 2rem;
    gap: 3rem;
  }
}

/* 竖屏布局：高 > 宽（高宽比 > 1），适配手机竖屏 */
@media (min-aspect-ratio: 6/5) { /* 6/5 = 1.2，对应自定义阈值 */
  .page-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1.5rem;
  }
}

注意：如果需要兼容旧浏览器，可以用min-aspect-ratio和max-aspect-ratio的旧写法，效果一致。

2. JavaScript动态检测（复杂场景适配） #

如果需要结合更多逻辑（比如同时判断设备类型、用户偏好），或者需要动态修改DOM结构，可以用JS实时检测窗口宽高比并调整布局：

// 定义自定义阈值
const RATIO_THRESHOLD = 1.2;

function updateLayout() {
  const currentRatio = window.innerHeight / window.innerWidth;
  const container = document.querySelector('.page-container');

  if (currentRatio > RATIO_THRESHOLD) {
    container.classList.add('vertical');
    container.classList.remove('horizontal');
  } else {
    container.classList.add('horizontal');
    container.classList.remove('vertical');
  }
}

// 初始化执行
updateLayout();
// 窗口大小变化或设备旋转时重新计算
window.addEventListener('resize', updateLayout);
window.addEventListener('orientationchange', updateLayout);

对应的CSS类样式：

.horizontal {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

.vertical {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

3. 进阶适配思路 #

• 移动优先设计：先编写竖屏（移动端）的基础样式，再通过媒体查询覆盖横屏样式，这样能确保移动端体验优先，同时减少代码冗余。
• 结合viewport设置：移动端必须添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则媒体查询会基于缩放后的虚拟宽度，导致布局判断失效。
• 区分窗口宽高比与设备方向：orientation媒体查询（如@media (orientation: portrait)）是基于设备物理方向，而宽高比查询是基于当前窗口尺寸，后者更灵活（比如笔记本窗口拉窄时也能触发竖屏布局）。

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