如何在媒体查询(media queries)中使用逻辑表达式实现宽高条件判断

原生CSS媒体查询不支持直接编写两个媒体属性互相运算比较的逻辑表达式，你写的@media only screen and (height < width * 2) {}不符合标准语法，无法被浏览器识别生效。

你要实现的「设备高度小于两倍宽度」的判断，可以转换成宽高比规则，用原生媒体查询的aspect-ratio属性就能实现：

• 你需要的条件 height < width * 2 换算为宽高比规则为：aspect-ratio > 1/2（aspect-ratio取值为 宽度/高度）
• 现代浏览器支持直观的范围写法，和你的需求逻辑完全对应：

@media only screen and (aspect-ratio > 1/2) {
  /* 你的样式规则 */
}

• 如果需要兼容旧版浏览器，可以用传统的min-aspect-ratio写法：

@media only screen and (min-aspect-ratio: 1/2) {
  /* 你的样式规则 */
}

如果你后续需要实现更复杂的自定义逻辑判断，还可以用JavaScript动态判断后给根节点加类名实现样式切换：

function checkScreenRatio() {
  const isMatch = window.innerHeight < window.innerWidth * 2;
  document.documentElement.classList.toggle('match-height-rule', isMatch);
}
// 页面加载和窗口大小变化时都触发判断
window.addEventListener('load', checkScreenRatio);
window.addEventListener('resize', checkScreenRatio);

之后在CSS里直接写对应类名的样式即可：

.match-height-rule .your-element {
  /* 匹配条件时的样式 */
}

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