在webapp中按比例调整divs

Question

我想创建一个可以调整大小的webapp（就像我们在我们的操作系统中调整窗口大小一样），我知道我可以很容易地使用绝对位置和调整属性的大小来做到这一点，但我希望它按比例调整大小，并有最大限度的限制，我试着用Google搜索但没有“精确”的答案，谢谢你的帮助：p！

Answer 1

好吧，我想我可能会得到你的意思，你可以使用jQuery UI不是CSS的：

HTML：

<div id="re_size_me">text in div</div> 

CSS：

#re_size_me{ 
    border: 2px solid; 
    padding: 20px; 
    width: 100px; 
    height: 100px; 
    overflow: auto; 
} 

Javascript/jQuery：

$(function() { 
    $("#re_size_me").resizable({ 
     aspectRatio: 1/1, 
     maxHeight: 300, 
     maxWidth: 300, 
     minHeight: 50, 
     minWidth: 50 
    }); 
    }); 

DEMO

你可以在这里阅读更多：https://jqueryui.com/resizable/

Answer 2

不知道如果这正是你以后的答案，但你可以使用最小高度，最大高度，以及同为宽度也使用％与大众保持率：

HTML ：

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

CSS：

body{ 
    width: 100%; 
    height: 100%; 
    margin 0; 
    padding 0; 
} 

#wrapper{ 
    width: 100vw; 
    height: 100vh; 
    background-color: #ccc; 
} 

.box { 
    width:20%; 
    height:20vw; 
    min-width:100px; 
    min-height: 100px; 
    max-width: 200px; 
    max-height: 200px; 
    margin:1%; 
    background:DodgerBlue ; 
    float:left; 
} 

DEMO