Scale the entire body when resizing the window

Scale the entire body when resizing the window

I would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn’t matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize
I have tried using:


1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"

some additional rules:
1. Do NOT use large fixed width elements
2. Do NOT let the content rely on a particular viewport width to render well
3. Use CSS media queries to apply different styling for small and large screens

also you can use media property and apply screen wise css.