My Websites Are A Mess in Zoom 100%+

Question

I always have this problem with the websites I develop. I used media queries with the max resolution :

@media only screen and (max-width : 1920px) {}

Is there any way to ensure content displays correctly if a page is zoomed to say 150%? Many of my elements have absolute positioning so if I used max width for other elements I would still have issues.

Answer 1

Yes ... a big step in the right direction is to start using em instead of px to set your media queries:

@media only screen and (max-width:120em){}

This accounts for zoom, whereas setting it by pixels gets all distorted as you zoom in. Here is a good article that talks about why to use em instead of px, and here is a good resource for px-to-em conversions.