Hello. I have the next task. It is necessary that when you reduce the screen resolution, all elements of the site are proportionally reduced, as if you are changing the scale. Is there any universal way to do this, so as not to write an adaptive version for each element? All pictures are in pixels.

  • five
    How does a person who comes to your site from a mobile phone will read the text, look at pictures and poke links, provided that all this will tend to zero in size? - Visman
  • The problem is that the customer is a master and he asks for it ... - Icerogue
  • The golden rule is not to allow the customer to even try to put forward proposals, only to accept the proposals put forward by you. Anyway, the whole ІT sphere suffers from this. After all, if you come to the doctor and tell him that you want to remove your healthy kidney, then a self-respecting doctor will never allow this to happen, but for some reason programmers are unfortunately used differently - Ninazu
  • Compare with the doctor is not at all that. There is a vital organ, as it were, but here is just a website. Believe me, we tried to explain to them the best way many times, but it's all useless. Also, on mobile devices, we will not do scaling. - Icerogue
  • one
    “The great theater artist Tyshler, creating sketches of scenery, drew a small green dog in the corner. And when someone from the selection committee asked: “I like everything, but where is this dog here?”, The artist with a sigh of regret daubed it. At this, the discussion process usually ended, the work was accepted, leaving the questioner with a sweet aftertaste of a fruitful creative discussion with the maestro ... ” Plus, you always need to mention losses. "Our UX designer claims that this will increase bouncerate and you will lose a lot of paying users" - Ninazu

2 answers 2

I do not claim that the method is universal, since requires CSS3 support, but look towards the CSS transform and @media properties.
For example, here is the option of using it to increase to 150%:

body { transform: scale(1.5); transform-origin: 0 0; } 

Using the CSS query @media, you can set the required values ​​for different screen resolutions, and also combine them with additional conditions, such as screen orientation or device type (for more information on using @media here or in Russian here ):

 @media all (max-width: 800px) { body { transform: scale(1.0); transform-origin: 0 0; } } @media screen and (max-width: 1024px) and (orientation: landscape) and (device-aspect-ratio: 16/9) { body { transform: scale(1.1); transform-origin: 0 0; } } 
  • As for media queries, did just that. Through js I set that at a screen resolution of more than 1000, scaling is used. Anything less is the usual display. - Icerogue

Can bind dimensions to window width

 html{ font-size:calc(100vw/638); /* 100/ширина_для_которой_были_рассчитаны_размеры_в_пикселах */ } body{ font-size:16rem; } /* далее везде вместо px указывается rem */ div { width:100rem; /*100px*/ background:yellow; } 
 <html> <body> <div> При ширине окна 638 данный блок будет шириной 100 пикселей </div> </body> </html> 

Replacing vw with vh , vmin , vmax you can tie all dimensions to the height of the window, the minimum or maximum of two sizes.