Css property to scale body accordingly to screen as if it were an image – Photoshop

….Technically, yes, but in reality, it’s a lot of work, and won’t really save you any time. Your best bet is to go back and start using Bootstrap. At least, using the cols and rows of Bootstrap Bootstrap is a fantastic tool for building responsive websites, for people who aren’t comfortable building responsive websites on their own.

I… have a lot of things to say.

First of all,

1. If you’re working on building websites, you really, really should have two monitors attached to your computer. Personally, I prefer having one small (1280×800) and one large (1920×1080) screen, because it makes me more aware and comfortable with responsive design. But that’s my personal preference, and many people prefer two large monitors. At the very least, you should also have a 1080p screen, so you can work directly on it.

2. To answer your question directly, this strategy is not going to work for tablets and phones, because the aspect ratio on desktop computers is "landscape", but in mobile devices the aspect ratio is "portrait". If you’ve ever tried to view a 1920×1080 image in mobile, you’ll immediately see why this a problem.

HOWEVER. If you’re looking for a way to scale the entire website based upon the body, …the approach that comes to mind first, REM, is quite popular, and I assume you’ve already tried it, but… I’ll clarify, just in case.

You can define everything using percent, EM or REM (h1, h2, h3, p, borders, padding, margin, height, fontsize, box-shadow etc… Everything. The phrase px should not appear in your stylesheet.) , and then scale the website with a simple series of media queries like this:

@media( min-width:1200px){
    html,body{
        font-size: 14px;
    }
}
@media( min-width:1400px){
    html,body{
        font-size: 15px;
    }
}
@media( min-width:1600px){
    html,body{
        font-size: 16px;
    }
}
@media( min-width:1800px){
    html,body{
        font-size: 17px;
    }
}

Which will cause the entire website to scale. Obviously, if you’re working with a theme or framework(Like Bootstrap), you’ll need to modify that framework to use REM too.

#3.The last thing that I have to say is that most websites DON’T look exactly the same on 720p screens vs 1080p screens. For example, take StackOverflow itself. This is what the current page we’re looking at looks like:

div#left-sidebar {
    width: 164px;
}

#sidebar {/*Right sidebar*/
    float: right;
    width: 300px;
}

div#mainbar {/*Center section*/
    width: calc(100% - 300px - 24px);    
}

#content {/*And this wrapper around it all*/
    max-width: 1100px;
    width: calc(100% - 164px);/*left sidebar*/
}

If you look at it, the entire website is more or less max-width:1480px. If it gets smaller than that, the sidebars stay the same size, but the middle section has width:100% and shrinks to fit the screen.

At around 1000px, StackOverflow gives up and hides the right sidebar, because there’s not enough space, but it STILL doesn’t change the size of any fonts or icons, ever. (On any screen size, from 1920px all the way down to tablet.)

A good designer should keep this kind of "responsive design" in mind, and give his programmers a design that can shrink cleanly, in this way.