How to scale website page sizes with css?

Question

css

Now the objects on my site look like this:

And I need to do something like this, without affecting the user's browser settings, reduce the size of the site's pages:

How can I do this quickly and painlessly?

Answer 1

html {
  transform: scale(.9, .9);
}

Answer 2

Do:

html {
font-size: 62.5%;     // - равно 10px
}

Next, we distill all px into rem according to the formula: 10 px = 1 rem.
That is, where padding-left: 340px -> padding-left: 34rem
When everything is moved to rem - just in the html selector we change the font-size to 50% for example. Whatever was given in rem will decrease by 62.5% - 50% = 12.5%. Proportional and without any blurs.
Only < img > have rigid width and height removed in the html code. Or specify sizes for them in css (again in rem).
Yes - not the fastest way. But the coolest. Plus you can mod media queries to gradually scale the layout. For example, with a 320x screen - make font-size: 25% in general.