Media Query
If there is no standard breakpoint then how can I utilize media queries 100% to make a responsive web
2 Replies
by not relying too much on media queries. Utilize the natural fluidness of html and css. Don't use too many hard coded values or positioned elements. CSS layout tools such as flex, grid and columns are your friend. Also, don't try to remake a design pixel perfect (it's just a guide). I'm not saying you should not use Media Queries, but you don't need one for every device screensize
You can generally get away with just having a big and a small (you choose which one uses a media query), feel free to make the point in which the shift happens whenever it should change rather than designing around a specific value, all other responsiveness comes from not setting fixed widths and allowing things to naturally squish
It can be worth making sure that ultra-wide also works (like 21:9), for instance if you use
vw and if anything has an aspect-ratio or inherent aspect ratio (like images and svgs) then things may be way too big. This can generally be avoided but it's a possibility you may need to account for ultra-wide.