How to make auto zoom in website? of flexible for any resolution

Question

Is there any way how to make website size flexible to any (or several) resolutions, but with enlargement of every element (something like zoom efect)? So in bigger resolution, images, buttons and inputs would be bigger as well as text? Is it even possible?

Answer 1

You need to make a seprate CSS for each resolution or you can just try the jQuery techniques!

In order to run the correct CSS at the correct resolution you need to use media queries for that.

For jQuery take a look at this question that checks for zoom in a browser.

Use the media queries like this:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- for screen of width 800px -->

Answer 2

Use a media query...a simple example using font-size:

@media (min-width:400px) {
   p {
     font-size: 10px;
     }
  }
@media (min-width:800px) {
  P {
    font-size: 12px;
    }
  }

The example is only for p elements, but can be applied to anything with a size attribute.