javascript – CSS VW和VH – 保持比率

2023年2月3日 175次阅读

我有一个页面,其中包含一个保持纵横比的DIV.我在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>

最佳答案 看看这个新的小提琴：
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 ;
  }
}
点赞