如何根据浏览器宽高比控制Div显示？Bootstrap 4布局适配问题

嗨，我明白你现在的困扰——之前靠固定像素断点来切换布局太死板，想要根据浏览器的宽高比来智能切换对吧？我来给你捋清楚解决方案：

一、替换媒体查询：从固定像素到宽高比触发 #

你之前用的min-width+max-height组合确实不够灵活，要实现宽高比小于1.6~1.7时切换到单列布局，关键是用max-aspect-ratio（宽/高 ≤ 设定值时生效），而非你之前尝试的min-aspect-ratio。

比如1.6对应8/5，1.7对应17/10，你可以根据实际需求选择更合适的比值，以下是调整后的代码：

/* 当浏览器宽高比 ≤ 1.7（17/10）时，显示单列布局 */
@media (max-aspect-ratio: 17/10) {
  #show-one-column-layout, .show-one-column-layout {
    display: block !important;
  }
  .show-fullscreen-layout {
    display: none !important;
  }
}

/* 当宽高比 >1.7 时，保持双列布局 */
@media (min-aspect-ratio: 17/10) {
  #show-one-column-layout, .show-one-column-layout {
    display: none !important;
  }
  .show-fullscreen-layout {
    display: block !important;
  }
}

注：加!important是为了确保自定义样式能覆盖Bootstrap的默认布局样式，如果你的选择器足够具体（比如结合父容器类名），也可以不用!important。

二、修复右侧栏视频的宽高比适配问题 #

视频的宽高比和预定义列冲突，这时候可以直接用Bootstrap 4内置的响应式视频容器来解决，它能自动保持视频的宽高比，同时适配父列的宽度：

<!-- 假设你的视频是16:9的宽高比，替换成你需要的比值即可 -->
<div class="embed-responsive embed-responsive-16by9">
  <!-- 如果是iframe嵌入的视频 -->
  <iframe class="embed-responsive-item" src="你的视频链接"></iframe>
  
  <!-- 如果是原生video标签 -->
  <!-- <video class="embed-responsive-item" controls>
    <source src="你的视频文件地址" type="video/mp4">
  </video> -->
</div>

Bootstrap支持的预设宽高比类有：embed-responsive-21by9、embed-responsive-16by9、embed-responsive-4by3、embed-responsive-1by1，如果需要自定义宽高比，也可以自己写CSS：

.embed-responsive-custom {
  padding-bottom: 62.5%; /* 宽高比16:10的话，就是10/16*100%=62.5% */
}

三、额外注意事项 #

• 确保你的大容器设置了width: 100%或者max-width: 100%，避免固定宽度导致布局在缩放时出现溢出
• 测试不同宽高比的窗口，比如把浏览器拉扁、拉高，确认布局切换的时机符合预期，可微调17/10这个比值到你觉得最合适的临界点

这样调整后，不管用户用什么分辨率的屏幕，只要浏览器的宽高比达到你的设定值，布局就会自动切换，视频也能完美适配列的宽度啦！

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