无需container queries，纯CSS实现容器比例适配切换Logo方案问询

问题分析 #

需要根据<header>容器的横/竖比例自动切换logo：

• 容器为横屏比例（宽>高）时，显示logo-horizontal.svg
• 容器为竖屏比例（宽<高）时，显示logo-vertical.svg
  给定布局中，<header>为网格第一行，占1fr，下方是固定高度的content（6em）和callToAction（48px），因此<header>的高度由视口高度减去固定区域高度决定，其宽高比与视口比例高度关联。

解决方案 #

通过修改HTML结构添加两个logo元素，结合视口媒体查询实现切换：

1. 调整HTML结构

在<header>中同时放入横版和竖版logo：

<header>
  <img class="logo logo-horizontal" src="images/logo-horizontal.svg" alt="品牌Logo" />
  <img class="logo logo-vertical" src="images/logo-vertical.svg" alt="品牌Logo" />
</header>

<div class="content"><p>Some text</p></div>

<div class="callToAction"><a class="btn">Start here</a></div>

2. 编写CSS代码

先设置基础网格布局，再通过媒体查询控制logo的显示/隐藏：

/* 基础网格布局 */
body {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr 6em 48px;
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 基础logo样式：默认显示横版 */
.logo {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

.logo-vertical {
  display: none;
}

/* 精准匹配：当视口宽度小于header高度时，切换为竖版logo */
@media (max-width: calc(100vh - 6em - 48px)) {
  .logo-horizontal {
    display: none;
  }
  .logo-vertical {
    display: block;
  }
}

原理说明 #

通过calc(100vh - 6em - 48px)计算出<header>的实际高度，当视口宽度小于该值时，<header>呈现宽<高的竖屏比例，此时触发媒体查询切换为竖版logo；反之默认显示横版logo，完全匹配容器的比例状态。

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