Keeping translate css (x,y) values same for all screen resolutions?

Question

I have been using translate css (translate(100,200)) for my object animation. But there's a problem with it i have a different resolution and when im putting some different co-ordinates for another screen so my object goes out of my screen. Please help that how can i use translate css for all screens?

Answer 1

Using pixel measurements it's impossible to have something work on all resolutions unless you are always assuming the smallest, which is unviable for larger screens.

So you have two basic solutions:

• Use percentage based positioning, the main issue with this is that you never have true control over where your elements will be positioned on screen, since 20% of a 320px wide screen is vastly different from 20% on a 1920px wide display.

• Use media queries, this is probably the best solution, it does involve a bit more work though. I reccommend setting your canvas/container to a specific width/height on each resolution jump, this way you can probably get away with 3 or 4 different sizes.

An important thing to note is that you can combine both at some points depending on your exact needs, here's a basic example for how i'd set the container's sizes up:

.container {
    width: 1200px;
    height: 800px;
}
.container .child {
    /*animation stuff*/
}
@media (max-width: 1199px){
    .container {
        width: 900px;
        height: 600px;
    }

    .container .child {
        /* animation adjustments */
    }

}
/* etc... */

Another neat thing about setting up static sizes is that you have better control with your percentages, specially if you keep the width/height proportions equal.