Question

我有一个包含DIV的页面，它保持纵横比。我在div中有一些文本在字体大小上使用VW，当页面宽度改变时，它保持文本大小 - 这很棒。

但是当用户改变窗口高度时 - 我无法以相同的方式响应它 - 因为VW和VH不能一起播放。

是否有一些CSS或Javascript技巧可以让它发挥作用？如果用户在网站上更改浏览器大小，理想情况下即可实时运行？

这是问题所在：

<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

看看这个新的小提琴：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 ;
  }
}

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>

CSS VW和VH - 保持比率

2 个答案: