CSSでvwとvhの両方を使用できますか？

Question

私はCodePenを使用して、スポーツリーグのブラケットに取り組んでいます。ここでは、コードの行が問題である：

#body div[class^="side-"] ol li p.game a { 
    color: #000000; 
    font: bold .7vw/1 tungsten, sans-serif; 
    height: auto; 
    width: auto; 
    padding: 0; 
    box-shadow: 0; 
} 

私は窓の幅方向のサイズを変更すると、それは正常に見えるが、高さを調整するときにテキストがブラケット間でオーバーフローを作成するサイズは変更されません。私はvminを使用しようとしましたが、ウィンドウの高さがほとんど常に幅よりも小さいので、それは役に立ちません。ウィンドウが幅と高さの両方のサイズ変更に合わせるように、vwとvhの両方の仕様を使用することは可能ですか？

ご協力いただきありがとうございます。

Answer 1

はい、あなたのユースケースの仕様によって異なります。 CSSはaspect-ratioのメディアクエリを許可します。これにより、さまざまなアスペクト比に対して、vminまたはvw/vhのサイズを持つことができます。あなたに基づいてラフ例：

html { 
    color: #000000; 
    font: bold 7vw tungsten, sans-serif; 
    height: auto; 
    width: auto; 
    padding: 0; 
    box-shadow: 0; 
    font-size: 20vmin; 
} 

@media (min-aspect-ratio: 3/1) { 
    html { 
    color: #00a; 
    font-size: 14vmin; 
    } 
} 

これは、アスペクト比についてのあなたの懸念のために解決できるようにする必要があります：「私はVMINを使用してみましたが、窓の高さはほとんど常によりも小さくなるように、そのは役立ちません。幅"。

デザインによっては、画面が広い場合はvw、画面が大きい場合はvhを使用すると、上記のvminを使用するよりも良い場合があります。

Answer 2

おそらく、単語ラップ：break-wordというプロパティが表示されますか？エルス

、あなたが見ることができます：

@media all and (orientation: landscape) { /* HERE YOUR CODE */ }