Resize webpage dynamically

Question

I am developing a bunch of small web applications with an unknown window size as the target. To solve this problem, I develop very large layouts and scale them to fit the window size.

However, my decision has inconvenience. When I resize everything, everything becomes a little inappropriate (mainly when scaling text), and this is noticeable. My code is very simple, everything on my page is absolutely positioned, so I just get the scaling factor and apply it to all the positions and width / height of each div / img / span / input on the page. The code is as follows:

function resize() { var wh = $(window).height(); var h = maxHeight; var ww = $(window).width(); var w = maxWidth; var wProp = ww / w; var hProp = wh / h; if (wProp < hProp) prop = wProp; else prop = hProp; if (prop > 1) prop = 1; console.log(prop); $("div").each (applyNewSize); $("img").each (applyNewSize); $("span").each (applyNewSize); $("input").each (applyNewSize); } //this is run when the page is loaded function initializeSize (i) { this.oX = $(this).position().left; this.oY = $(this).position().top; this.oW = $(this).width(); this.oH = $(this).height(); if ($(this).css("font-size") != undefined) { this.oFS = Number($(this).css("font-size").split("px")[0]); } } function applyNewSize (i) { if (this.oFS != undefined) $(this).css("font-size", Math.round(this.oFS * prop) + "px"); $(this).css("left", Math.round(this.oX * prop) + "px"); $(this).css("top", Math.round(this.oY * prop) + "px"); $(this).width(Math.round(this.oW * prop)); $(this).height(Math.round(this.oH * prop)); } 

This problem tormented me last week. Do you have a workaround or solution for this?

Answer 1

I recommend that you familiarize yourself with responsive web design.

It works instead of% to instead of exact pixels:

  <div class="container"> <section> THIS IS THE SECTION </section> </div> 

CSS ::

 .container{ width: 80%; // 80% instead pixels background: gainsboro; border: 3px inset darkgrey; height: 200px; margin:auto; text-align:center; } section{ width: 80%; // 80% instead pixels height: 80%; // 80% instead pixels background: darkgrey; margin:auto; } 

Then you can also use media queries to redistribute blocks or apply different styles at different widths:

tutorial example: http://css-tricks.com/css-media-queries/