Reduce the size of all elements in html like zooming out the page-CodePudding

Is it posible to reduce size off all html content inside of body tag?

I mean how to make all the content in html page to be smaller like when we zoom out the page to 90%. For example: from this to be smaller like this

Any help is appreciated

CodePudding user response：

If you've followed responsive design rules then all content will shrink and grow, adjusting to the screen height and width ( Basically, when you zoom out the height and width of the window increases.)

For example, let's say in your case you've set the width of the card to be xxpx, then it won't be responsive it'll always be xxpx on all screens. If instead, you have set the width to be 20%, then, whatever the width of the window is you card will adjust to 20% of the total width.

Hopefully, I have answered your question correctly.

CodePudding user response：

All HTML content inside of the body tag can be "zoomed" in and out by using the CSS zoom attribute.

For example, to zoom content to 90% simply modify the body element to

body {
  zoom: 90%;
}

The zoom attribute can also be directly added to the body tag.

For example,

<body style="zoom: 90%">
    Content Here
</body>

I hope this provides the help you need.