如何实现网站对当前屏幕宽高比的响应式适配？

要针对不同宽高比的屏幕设置差异化样式，核心是用CSS的媒体查询直接匹配屏幕的宽高比特性——这正是你之前用最大/最小宽高方案的问题所在：它只看像素尺寸，完全忽略了宽高的比例关系。

核心方案：aspect-ratio媒体特性 #

CSS的aspect-ratio媒体查询可以直接根据屏幕的「宽度/高度」比例来应用样式，常用变体有三种：

• min-aspect-ratio: 匹配宽高比大于等于指定值的屏幕
• max-aspect-ratio: 匹配宽高比小于等于指定值的屏幕
• aspect-ratio: 精确匹配某一宽高比（实际场景中较少用，因为设备比例可能存在细微偏差）

实用示例 #

下面是针对16:9宽屏和9:16竖屏的样式适配代码：

<div class="container">
  <div class="card">内容区块1</div>
  <div class="card">内容区块2</div>
</div>

/* 默认基础样式 */
.container {
  width: 100%;
  min-height: 220px;
  background: #f5f5f5;
  padding: 1.2rem;
  box-sizing: border-box;
}

.card {
  margin: 0.6rem 0;
  padding: 1rem;
  background: white;
  border-radius: 4px;
}

/* 适配宽高比 ≥16/9的屏幕（桌面16:9显示器、横屏手机等） */
@media (min-aspect-ratio: 16/9) {
  .container {
    background: #2563eb;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
  }

  .card {
    flex: 1;
    max-width: 420px;
  }
}

/* 适配宽高比 ≤9/16的屏幕（竖屏手机、平板竖屏等） */
@media (max-aspect-ratio: 9/16) {
  .container {
    background: #16a34a;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 92%;
    max-width: 320px;
  }
}

关键说明 #

1. 这个方案完全基于屏幕比例，和实际像素尺寸无关——哪怕手机宽度是1920px，只要它的宽高比是9:16，就会应用竖屏样式，不会和1920p桌面显示器混淆。
2. 如果需要区分更细分的比例（比如21:9超宽屏），可以叠加多个媒体查询：

   @media (min-aspect-ratio: 21/9) {
     /* 超宽屏专属样式 */
   }
   

3. 可以结合orientation（横屏/竖屏）特性，但aspect-ratio能提供更精确的控制，比如区分16:9和16:10的横向屏幕。

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