Do 4k phone resolutions affect responsive CSS that relies on pixel width?

Question

4k phones are still new in the market, but I suppose it's only a matter of time the tech becomes more widespread. Should I be concerned when it comes to designing responsive websites?

Is there any other unit of measure that I should use that's not px to avoid issues in the future or are my worries unfounded?

Answer 1

Short answer: Your worries are probably unfounded.

Longer answer: I don't know the exact specs of some 4k phones, but the interpreted CSS-resolution of smartphones these days is in most cases much lower than the physical resolution. (see this thread about device pixel ratio). 4k phones will just have a much higher device pixel ratio. So if your responsive websites work on devices like the iphone 5 or 6, they will probably also do well on 4k phones.

That said, to be at least somehow future proof, I advise to follow best practices. Some examples:

• Use SVGs instead of pixel graphics where possible, so the graphics stay sharp on devices with high pixel ratio.
• Work mobile first and set your breakpoints where they make logical sense, not targeting specific devices

Answer 2

You should use % instead of px and use em for font-size