我有一个页面,其中包含一个维护宽高比的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>
vmin
:https://jsfiddle.net/Lp8jynfr/2/ - Asons