窗口缩放时使SPA所有元素按比例定位（HTML/CSS/Bootstrap3.3.7）

嘿，我完全懂你想要的效果——就像把每一页幻灯片都当成一张完整的图片，不管浏览器窗口怎么拉缩放，里面的DIV、图片、文字都保持相对位置，不会乱堆叠对吧？作为用Bootstrap 3.3.7摸过不少SPA的开发者，给你几个适合新手的解决方案，重点用CSS+少量jQuery就能搞定：

核心思路：用「固定宽高比容器+百分比定位+缩放」实现图片式适配 #

Bootstrap 3的栅格本来就是为响应式堆叠设计的，所以咱们得绕开它的默认断点行为，改用「整体缩放」的思路，让整个幻灯片内容像图片一样按比例适配窗口。

方案1：固定宽高比容器 + 百分比布局（基础版，无JS） #

先给每个幻灯片设置全屏容器，然后内部套一个固定宽高比的内容容器，所有元素都基于这个容器用百分比定位和尺寸：

/* 全屏幻灯片容器 */
.slide {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  /* 让内容在窗口居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 固定宽高比的内容容器（以16:9为例） */
.slide-content {
  position: relative;
  width: 100%;
  max-width: 1920px; /* 你的设计稿原始宽度 */
  height: 0;
  padding-bottom: 56.25%; /* 16:9比例 = 9/16*100% */
}

/* 内部元素全部用百分比定位/尺寸 */
.slide-content img {
  position: absolute;
  top: 12%; /* 距离顶部12% */
  left: 8%; /* 距离左侧8% */
  width: 35%; /* 宽度占内容容器的35% */
}

.slide-content h1 {
  position: absolute;
  bottom: 18%;
  right: 10%;
  font-size: 4vw; /* 用vw单位，字体随窗口宽度按比例缩放 */
}

这个方案的好处是不用JS，元素会跟着内容容器的比例自适应，但缺点是如果窗口宽高比和设计稿差异大，内容会被拉伸（比如窄屏时图片变扁）。

方案2：加JS实现「无损比例缩放」（进阶版，完美适配） #

如果要避免拉伸，让内容始终保持原始比例，就需要用jQuery监听窗口大小变化，动态计算缩放比例，把整个内容容器按比例缩放：

/* 先保留方案1的CSS，再加这一行 */
.slide-content {
  transform-origin: center center; /* 缩放时以中心为原点 */
}

然后加一段简单的jQuery代码（适合新手理解）：

// 页面加载和窗口 resize 时都执行缩放逻辑
$(window).on('load resize', function() {
  // 获取窗口和内容容器的宽高比
  const windowRatio = $(window).width() / $(window).height();
  const contentRatio = $('.slide-content').width() / $('.slide-content').height();
  
  let scale;
  if (windowRatio > contentRatio) {
    // 窗口比内容宽，按高度缩放，保证内容垂直填满窗口
    scale = $(window).height() / $('.slide-content').height();
  } else {
    // 窗口比内容高，按宽度缩放，保证内容水平填满窗口
    scale = $(window).width() / $('.slide-content').width();
  }
  
  // 给内容容器应用缩放
  $('.slide-content').css('transform', `scale(${scale})`);
});

这样不管窗口怎么变，内容都会像图片一样按比例缩放，元素绝对不会堆叠，完全符合你的需求！

注意：禁用Bootstrap栅格的堆叠行为 #

如果你之前用了Bootstrap的.col-*类，记得覆盖它的默认媒体查询，让列始终保持宽度不堆叠：

/* 覆盖Bootstrap 3的栅格断点，禁止列堆叠 */
@media (max-width: 767px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
  .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
    width: auto !important; /* 或者设置你需要的百分比 */
  }
}

其实更推荐你直接用百分比定位代替Bootstrap栅格，因为栅格的响应式逻辑和咱们要的「比例缩放」本质冲突，用百分比定位更直接。

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