如何在Bootstrap 5中检测屏幕方向/视口并适配视频列表布局

一、实现目标布局（横屏/竖屏适配） #

方法1：CSS媒体查询直接适配 #

Bootstrap 5本身没有原生的方向响应类，但可以结合CSS的orientation媒体查询快速实现需求，无需额外JS：

1. 基础HTML结构

<div class="container-fluid vh-100 position-relative">
  <!-- 主视频区域 -->
  <div class="main-video w-100 h-100">
    <!-- 主视频内容 -->
  </div>
  <!-- 视频列表 -->
  <div class="videolists">
    <div class="video-item">子视频1</div>
    <div class="video-item">子视频2</div>
    <div class="video-item">子视频3</div>
  </div>
</div>

2. 自定义CSS适配方向

/* 全局重置视频列表基础样式 */
.videolists {
  position: fixed;
  padding: 1rem;
  gap: 0.8rem;
  background-color: rgba(0,0,0,0.7);
}

/* 竖屏状态：水平对齐在底部 */
@media (orientation: portrait) {
  .videolists {
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    overflow-x: auto; /* 视频项过多时允许横向滚动 */
  }
}

/* 横屏状态：垂直对齐在右侧角落 */
@media (orientation: landscape) {
  .videolists {
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

如果需要结合Bootstrap的断点（比如针对平板/手机做细分适配），可以叠加媒体查询：

/* 小屏设备（<768px）竖屏时，改为左对齐并允许滚动 */
@media (max-width: 767.98px) and (orientation: portrait) {
  .videolists {
    justify-content: flex-start;
    padding-left: 0.5rem;
  }
}

方法2：JS动态添加类+Bootstrap工具类 #

如果习惯用Bootstrap的内置工具类，可以通过JS给body添加方向标识类，再结合工具类实现布局：

1. JS监听方向变化并添加类

function updateOrientationClass() {
  const body = document.body;
  body.classList.remove('portrait-mode', 'landscape-mode');
  body.classList.add(window.matchMedia("(orientation: portrait)").matches ? 'portrait-mode' : 'landscape-mode');
}

// 初始化执行
updateOrientationClass();
// 监听方向切换
window.addEventListener('orientationchange', updateOrientationClass);
// 监听窗口尺寸变化（桌面端调整窗口大小也触发）
window.addEventListener('resize', updateOrientationClass);

2. 结合Bootstrap工具类写布局

<div class="videolists position-fixed p-3 gap-3 bg-dark bg-opacity-70 
            portrait-mode:bottom-0 portrait-mode:left-0 portrait-mode:right-0 
            portrait-mode:d-flex portrait-mode:justify-content-center
            landscape-mode:top-0 landscape-mode:right-0
            landscape-mode:d-flex landscape-mode:flex-column landscape-mode:items-end">
  <div class="video-item">子视频1</div>
  <div class="video-item">子视频2</div>
</div>

3. 补充CSS映射类（让自定义前缀的工具类生效）

.portrait-mode .portrait-mode\:bottom-0 { bottom: 0; }
.portrait-mode .portrait-mode\:left-0 { left: 0; }
.portrait-mode .portrait-mode\:right-0 { right: 0; }
.portrait-mode .portrait-mode\:d-flex { display: flex; }
.portrait-mode .portrait-mode\:justify-content-center { justify-content: center; }

.landscape-mode .landscape-mode\:top-0 { top: 0; }
.landscape-mode .landscape-mode\:right-0 { right: 0; }
.landscape-mode .landscape-mode\:flex-column { flex-direction: column; }
.landscape-mode .landscape-mode\:items-end { align-items: flex-end; }

二、检测屏幕方向与视口尺寸的方法 #

1. CSS层面检测 #

• 检测屏幕方向：

  /* 匹配竖屏 */
  @media (orientation: portrait) { /* 样式逻辑 */ }
  /* 匹配横屏 */
  @media (orientation: landscape) { /* 样式逻辑 */ }
  

• 检测视口尺寸（直接用Bootstrap原生断点）：

  /* 超小屏：<576px */
  @media (max-width: 575.98px) { ... }
  /* 小屏：≥576px */
  @media (min-width: 576px) { ... }
  /* 中屏：≥768px */
  @media (min-width: 768px) { ... }
  /* 大屏：≥992px */
  @media (min-width: 992px) { ... }
  /* 超大屏：≥1200px */
  @media (min-width: 1200px) { ... }
  

2. JavaScript层面检测 #

• 检测屏幕方向：

  // 获取当前方向状态
  const isPortrait = window.matchMedia("(orientation: portrait)").matches;
  
  // 监听方向变化
  window.matchMedia("(orientation: portrait)").addEventListener('change', (e) => {
    if (e.matches) {
      // 切换到竖屏，执行对应逻辑
    } else {
      // 切换到横屏，执行对应逻辑
    }
  });
  

• 获取并监听视口尺寸：

  // 获取当前视口宽高
  const getViewportSize = () => ({
    width: window.innerWidth,
    height: window.innerHeight
  });
  
  // 监听视口变化
  window.addEventListener('resize', () => {
    const { width, height } = getViewportSize();
    // 根据尺寸执行逻辑，比如判断是否进入Bootstrap断点
    const isMobile = width < 576;
  });
  

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