缩小容器中的所有物品

Question

I have a webpage where all items on the page are inside a container but I would like to make everything smaller by 25%. I have tried:

Container.CSS

.container{
     transform: scale(0.75);
}

But this technique shrinks the entire page making it about 2 inches offset from the top of the screen, and also makes all the items on the page blurry.

Question. Does anyone know a quick and easy way to do what I want to do, or will I have to individually make every item in the CSS 25% smaller?

Thanks

Answer 1

Since you haven't uploaded any code for us to edit, all I can say is that I would give the main page container or body a width of 75%, and then make every element inside have percentual widths, so they stay responsive.

But as you noted the transform: scale(0.75); solution, I conclude you also want the font, borders, etc to shrink. Your best solution is to convert the px values to em values (generally speaking 16px = 1em ) for those things, and then change the body's font-size to 75%, shrinking everything in the page, because 1em has then become 12px.

Might take some time, but when you're done, your whole page has been made dynamic

Hope this helps

Answer 2

If responsive design so easy, all non-mobile friendly sites could be fixed in 1 minute. But it's not that way I'm afraid.

The individual items would need to have percentage widths on them. Using max-width with percentage widths is good too. For example you would have your main container set at 75% and a max-width of whatever the maximum your graphics can take inside. If your items inside have % widths then the one at 25% will always be 25% of whatever size the container is.