如何根据窗口宽度动态添加、移除元素CSS类实现页面适配？

问题场景 #

当前通过PHP输出带Bootstrap栅格类的视频容器，希望根据窗口宽度动态调整布局：

echo "<div class=\"col-6\"><div class=\"videoTitle\">Dyno 1a</div><iframe src='cam1a.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class=\"col-6\"><div class=\"videoTitle\">Dyno 1b</div><iframe src='cam1b.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 2</div><iframe src='cam2.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 3</div><iframe src='cam3.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 4</div><iframe src='cam4.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

尝试用jQuery动态调整类，但窗口宽度变化时布局未更新，视频被截断：

$(document).ready(function(){
  if ($(window).width() <= 768) {
    $( ".col-4" ).addClass(".col-12");
    $( ".col-4" ).removeClass(".col-4");

    $( ".col-6" ).addClass(".col-12");
    $( ".col-6" ).removeClass(".col-6");
  } else if ($(window).width() <= 992) {
    $( ".col-4" ).addClass(".col-6");
    $( ".col-4" ).removeClass(".col-4");
  }
});

问题分析 #

原代码存在三个核心问题：

• 类名格式错误：addClass和removeClass的参数不需要加.，带点会导致添加无效类（比如.col-12会被当成类名的一部分）。
• 仅初始化执行：代码只在页面加载时运行一次，窗口大小变化时不会重新执行布局调整逻辑。
• 未处理恢复逻辑：当窗口从窄变宽时，没有恢复原始栅格类，导致布局无法还原。

修复后的代码 #

// 封装布局调整函数
function adjustLayout() {
  const windowWidth = $(window).width();
  
  // 标记并筛选原始col-4的容器
  const col4Elements = $(".col-4, .col-6, .col-12").filter(function() {
    if (!$(this).data('original-col')) {
      $(this).data('original-col', $(this).hasClass('col-4') ? 'col-4' : 'col-6');
    }
    return $(this).data('original-col') === 'col-4';
  });
  
  // 标记并筛选原始col-6的容器
  const col6Elements = $(".col-4, .col-6, .col-12").filter(function() {
    if (!$(this).data('original-col')) {
      $(this).data('original-col', $(this).hasClass('col-6') ? 'col-6' : 'col-4');
    }
    return $(this).data('original-col') === 'col-6';
  });
  
  if (windowWidth <= 768) {
    col4Elements.removeClass('col-4 col-6').addClass('col-12');
    col6Elements.removeClass('col-6').addClass('col-12');
  } else if (windowWidth <= 992) {
    col4Elements.removeClass('col-4 col-12').addClass('col-6');
    col6Elements.removeClass('col-12').addClass('col-6');
  } else {
    // 窗口宽度大于992时恢复原始类
    col4Elements.removeClass('col-6 col-12').addClass('col-4');
    col6Elements.removeClass('col-12').addClass('col-6');
  }
}

// 页面加载时执行一次
$(document).ready(function() {
  adjustLayout();
  // 监听窗口resize事件，防抖避免频繁执行
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(adjustLayout, 200);
  });
});

更优方案：使用Bootstrap原生响应式类 #

无需JS，直接利用Bootstrap的栅格响应式类即可实现，更简洁且性能更好：

// col-md-6在中等屏幕及以上生效，小屏幕及以下变为col-12
echo "<div class=\"col-md-6 col-sm-12\"><div class=\"videoTitle\">Dyno 1a</div><iframe src='cam1a.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-md-6 col-sm-12\"><div class=\"videoTitle\">Dyno 1b</div><iframe src='cam1b.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

// col-lg-4在大屏幕及以上生效，中等屏幕变为col-6，小屏幕变为col-12
echo "<div class=\"col-lg-4 col-md-6 col-sm-12\"><div class=\"videoTitle\">Dyno 2</div><iframe src='cam2.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-lg-4 col-md-6 col-sm-12\"><div class=\"videoTitle\">Dyno 3</div><iframe src='cam3.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-lg-4 col-md-6 col-sm-12\"><div class=\"videoTitle\">Dyno 4</div><iframe src='cam4.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";

Bootstrap的CSS媒体查询会自动根据窗口宽度切换类，完全不需要JS干预。

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