How to do a good responsive for large screens?
In the last few moment I'm having a weird problem. The design send a project, I do it almost like perfect pixel for my screen resolution, that is 1920x1080. But the designer have a large screen, I think 2560x1080. I use browser devtools to see the websites on this screen size, but he also have the default scale of this kind of monitors, that put 125% of zoom. There is some math that can help me to always make the websites correctly for this type of large screens?
What I'm doing know is: I that the values of a normal screen like mine and let's supose that the element has a width of 400px. So I use 67% of this value as default, on this case, 268px, and later I put a ' @media (max-width: 1920px)' and there I use the 400px, but I thing that probably exist a better way to do this. Can u guys help me, please?
1 Reply
Without a demo or idea of how its build its hard to give you a magic fix all answer.
I would first say don't try to chase the "pixel perfect" myth... You just want to make sure that its viewed well on all devices not the same.
I find that most people on 2k or 4k will manually zoom websites already, this brings it in closer to the 1920 view. Also most will increase their font-size.
So long as you are coding a responsive layout with font-size in rems it should be ok?
If you want it to be larger on those screens you would just increase the min-width of the layout and increase the font-size (in rem) manually in the media queries for > 1920
then even if they dont* zoom or change the font-size. they will still be getting a decent layout.