Question

如何为此设置规则？

@media (min-aspect-ratio: 2/1)

是我的尝试但它无法正常工作。

我也试过

@media (min-height: 50vw)

不知道在这里。我不想使用JavaScript。我想在浏览器屏幕小于w / 2时创建一个滚动条。

Answer 1

这是未经测试的，但也许这样的事情可能会有所帮助：

min-height: calc(100vw / 2);

Answer 2

您应该可以使用min-aspect-ratio。您的代码中的某些其他问题可能会阻止此属性运行。

以下是从https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

中提取的示例

/* Exact aspect ratio */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 2/1) {
  div {
    background: yellow;
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio -->

<div>Watch this element as you resize your viewport's width and height.</div>

如果浏览器屏幕的高度（h）小于（w / 2）

2 个答案: