动态div位置不会根据不同的屏幕分辨率而改变

Question

我有动态div，可以有不同的位置，宽度和高度。关于div的信息，我把它保存在数据库中，我用php调用它。但是当我使用不同的屏幕分辨率时，我在父div中有不同的位置。我使用jQuery来改变父div的位置和大小。我该如何解决这个问题？

我在这里有一张问题的照片：

以及它的完整尺寸：

分辨率较小的其他显示器：

$('.box').each(function() { $('.box').draggable();});
$('.box').each(function() { $('.box').resizable();});

#lager {
    height: 750px;
    border: 5px dotted #292929;        
}

.box {
    background:rgb(107, 193, 243);
    cursor:move;
    position:absolute;
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
<div class="row">
    <div id="boxid" class="col-xs-12">
    <!-- hier die Position änder -->
    </div>
</div>
<!--here I start the foreach -->
    <div id="id" class="box" style="top:50px; left:50px; width:50px; height:50px;">           
        <p id="top"></p>
        <p id="left"></p>  
        <p id="height"></p>
        <p id="width"></p>          
    </div>
<!--here I end the foreach -->