如果瀏覽器屏幕高度（h）小於（w/2）

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>