如何在HTML和CSS中获取屏幕宽高比？如何基于屏幕宽高比设置@media queries？

当然可以！CSS的媒体查询早就支持基于屏幕宽高比的条件了，这在适配不同形状的设备（比如宽屏显示器、手机、平板甚至折叠屏）时特别有用。下面我会详细解答你的问题：

一、是否支持基于宽高比的@media queries？ #

完全支持！CSS Media Queries Level 4正式引入了aspect-ratio媒体特性，专门用来匹配**视口（viewport）**的宽高比。之前旧版本的device-aspect-ratio（针对设备物理屏幕）已经被废弃，现在优先使用标准的aspect-ratio（针对当前网页显示的视口）。

二、具体实现方式 #

aspect-ratio媒体特性支持三种核心用法，你可以根据需求灵活选择：

• 精确匹配：@media (aspect-ratio: 16/9) —— 视口宽高比正好为16:9时生效
• 最小宽高比：@media (min-aspect-ratio: 16/9) —— 视口宽高比大于等于16:9时生效（比如宽屏显示器）
• 最大宽高比：@media (max-aspect-ratio: 4/3) —— 视口宽高比小于等于4:3时生效（比如竖屏手机）

给你几个实用的示例：

1. 适配竖屏手机（宽高比小于1，比如9/16）：

@media (max-aspect-ratio: 1/1) {
  .page-container {
    flex-direction: column;
    padding: 1rem;
  }
}

2. 适配宽屏显示器（宽高比大于16/9）：

@media (min-aspect-ratio: 16/9) {
  .sidebar {
    width: 30%;
    display: block; /* 宽屏下显示侧边栏 */
  }
}

3. 精确匹配正方形视口：

@media (aspect-ratio: 1/1) {
  .square-card {
    border-radius: 1rem;
    width: 80%;
    margin: 0 auto;
  }
}

三、在HTML和CSS中获取/计算屏幕宽高比 #

CSS层面的限制 #

CSS本身无法直接获取宽高比的具体数值，但可以通过媒体查询条件性应用样式，间接判断当前宽高比的范围。如果需要在CSS中使用动态的宽高比值，建议结合JavaScript实现。

JavaScript + CSS 结合获取并使用宽高比 #

通过JS计算视口宽高比，再将值存入CSS变量，就能让CSS直接使用这个动态值：

1. 计算并设置CSS变量：

// 计算当前视口宽高比
function getViewportAspectRatio() {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  return viewportWidth / viewportHeight;
}

// 初始化时设置变量
document.documentElement.style.setProperty('--viewport-aspect-ratio', getViewportAspectRatio());

// 窗口大小变化时实时更新
window.addEventListener('resize', () => {
  document.documentElement.style.setProperty('--viewport-aspect-ratio', getViewportAspectRatio());
});

2. 在CSS中调用这个变量：

/* 比如根据宽高比动态调整元素宽度 */
.dynamic-element {
  width: calc(100vh * var(--viewport-aspect-ratio));
}

纯HTML/CSS的间接判断 #

如果不想依赖JS，只能通过媒体查询的多断点组合来模拟“获取”宽高比范围，比如：

/* 当宽高比在4/3到16/9之间时应用样式 */
@media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9) {
  .content {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}

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