CSS VW和VH - 保持比例

Question

我有一个页面，其中包含一个维护宽高比的DIV。我在DIV中有一些文本，使用VW字体大小，可以在页面宽度更改时保持文本大小-这很棒。但是，当用户更改窗口高度时，我无法以同样的方式响应它-因为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>

- user3706091

---

“VW和VH不能一起使用”这句话是什么意思？宽高比例不是总是一样的吗？ - Fantasterei

你需要分别处理两种情况：一种是高度限制，另一种是宽度限制。根据这个情况更新类，使用 resize 处理程序（因为你正在使用 jQuery）。在其中一种情况下，字体大小将与 vw 成比例，而在另一种情况下则与 vh 成比例。 - andi

如果您想要一个属性依赖于视口的最小或最大边，可以查看vmin或vmax。 - Davey

这是您的代码收到的更新，实现了_Davey_建议使用的vmin：https://jsfiddle.net/Lp8jynfr/2/ - Asons

我犯了一个小错误，如果你的边界框是正方形，LSGon的jsfiddle会非常好。请看一下我提交的答案。 - Davey

Answer 1

请看这个新的fiddle：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 ;
  }
}

- Davey

Answer 2

最终我用了一些Jquery让它正常工作，效果非常流畅

我在DIV中添加了一个属性，告诉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>

- user3274489