How can I scale the screen dynamically based on resolution when the code looks like this?
.drawing-board {
width: 25%;
height: 25%;
background-color: black;
position: relative;
}
.drawing-board .box-1 {
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
left: 90px;
top: 90px;
}
.drawing-board .box-2 {
width: 20px;
height: 20px;
background-color: lime;
position: absolute;
left: 30px;
top: 30px;
}
<div class="drawing-board">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
Is there any simple examples for this case?