resize html project with absolute sizes

Question

I have a whole html project (html/css/js) set up with absolute sizes. So if increase the browser window size, the body keeps the same size and does not change. Is there an easy way to increase every single DOM with the aspect ratios when I increase the browser window? So it should kinda behave like when I zoom in on a picture. All the solutions I found were mainly meant for single elements in the html code.

Answer 1

In theory, yes, you could watch the window resize and scale your page content to some ratio based on the absolute size you designed it to.

// jQuery used for convenience, but this could be done in vanilla as well
var scalehack = function() {
  var abswidth = 500; // width of the absolutely-positioned layout
  var scale = window.innerWidth / abswidth; // amount to transform to fit the window
  $('#container').css("transform", "scale(" + scale + ")");
};

$(window).on("resize", scalehack);
scalehack();

body {
  margin: 0
}

#container {
  transform-origin: 0 0
}

div.box {
  border:1px solid;
  width: 500px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="box">
  This is text.
  <img src="http://placehold.it/100x100">
  <h1>Lorem Ipsum</h1>
  This is more text. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

In practice, as you can see by popping the above sample into fullscreen and then resizing the window, this gives very unsatisfactory results: everything scales including the font sizes and images, which will make things unreadably small on mobile screens and unreadably large on larger screens.

I know you're trying to find a way to avoid having to redo all your CSS in the relative units you should have used in the first place, but: honestly you should redo all your CSS in the relative units you should have used in the first place.