How to make your Web page shrink to the full scale of your browser

Demand

Today help a friend to make a small web page, but has not understood each other's needs;

the original is to achieve: " The content of the Web page becomes smaller with the browser window, and the scaling is not offset, that is, maintaining the original proportions "

When demand is not met

Before satisfying the demand, the margin-top of the landing box and the value of Margin-left are all accurate px (pixel value);

Overall page

CSS (review elements)

Zoom out of the browser window

You will find that the "login box" will remain in its inherent position because of "margin-left:1000px", so that it cannot be seen, and naturally it will not achieve a full-scale adaptive effect.

Similarly, because of the "margin-top:300px" Reason, when the browser window is zoomed out vertically, the "login box" will remain in its inherent position, so as not to see it

Cause of the problem

Because the values of margin-top and margin-left are accurate PX values, the values are fixed and the positions are fixed;

When you zoom out of the browser window, the space position of the target element is not changed.

Solution Scenario One

Change the value of Margin-top and margin-left to a percentage form;

Modified CSS (review element)

Zoom out of the browser window

Minimize the browser, the target element remains displayed

Zoom level to meet demand before vertical scaling

Programme II

Change the margin-top and margin-left to position, and use the absolute property of the Position property to determine the proportional position of the target element.

And the value of the positional attribute still has to be in the form of hundred percent

Modified CSS (review element)

Zoom out of the browser window

Minimize the browser, the target element is fully displayed

Vertical Zoom Effect

How to make your Web page shrink to the full scale of your browser