CSS VWとVH - 維持率

Question

アスペクト比を維持するDIVを含むページがあります。私は、ページ幅が変わったときにテキストサイズを維持するフォントサイズにVWを使用するdiv内にいくつかのテキストを持っています。これは素晴らしいことです。

しかし、ユーザーがウィンドウの高さを変更した場合、VWとVHが一緒に再生されないため、同じ方法で応答することはできません。

これを動作させるには、CSSまたはJavaScriptのトリッキーな点がありますか？サイト上でユーザーがブラウザのサイズを変更した場合に、即座にオンザフライで対応できますか？ここで

が言われている問題：

https://jsfiddle.net/Lp8jynfr/1/

<style> 
.page-wrapper{ 
    width: 100vw; 
    height: 68.60vw; /* height:width ratio = 9/16 = .5625 */ 
    max-height: 100vh; 
    max-width: 145.7vh; /* 16/9 = 1.778 */ 
    margin: auto; 
    position: absolute; 
    top:0;bottom:0; /* vertical center */ 
    left:0;right:0; /* horizontal center */ 
    border: 5px solid #000; 
} 

.text{ 
    position: absolute; 
    width:100%; 
    top:36%; 
    left:0; 
    right:0; 
    font-size: 5.6vw; 
    color:#2d90db; 
    text-align:center; 
} 
</style> 

<div class="page-wrapper"> 
    <div class="text"> 
    This is some text I want resized 
    </div> 
</div> 

Answer 1

は、私はそれは私が教えてDIVに属性を追加

かなりスムーズに動作しますが、この作業を取得するためにいくつかのjQueryをやってしまいましたJqueryはフォントサイズを取得し、親コンテナの高さを計算してDIVの高さに応じて縮尺を変えました

$(window).on("resize", function() { 

    $('.resize').height(function(){ 
     $height = $(this).parent().parent().height(); 
     $datasize = $(this).attr("data-size"); 
     $fontsize = $height/100 * $datasize+"px" 
     $(this).css("font-size",$fontsize); 
    }); 

}).resize(); 

<div class='resize' data-size="9">Some text I want to resize</div> 

Answer 2

この新しいフィドルを見てみましょう：https://jsfiddle.net/davey182673/Lp8jynfr/4/ビューポートの縦横比を検出するために、次のメディアクエリを使用します。

... 
.text { 
    font-size: 5.625vw; 
} 

/* at the point when the media query is applied */ 
/* 5.625vw = 10vh */ 
@media (min-aspect-ratio: 16/9) { 
    .text { 
    font-size: 10vh ; 
    } 
}