Best Media Queries Targeting

Hello, what are the best sizes to target breakpoints in
responsive view? that will effect most devices.

These are basics right?

@media (max-width:1440px) {}
@media (max-width:800px) {}
@media (max-width:768px) {}
@media (max-width:640px) {}

No, the media queries you will write will be different (usually) on a site-to-site basis. Your website should be fluid, and should scale up / down pretty well, but eventually, things will break, or perhaps at a certain screen width you want to change the layout, aka stack floated boxes instead of having them side-by-side. You then determine what width that needs to happen, and then do it.

Disassociate responsive web design and devices. Pretend devices do not exist. EVER. Merely take your browser window, and resize it when you are doing your testing. Does 300px to 2000px look perfect? Great; all devices will 99% be fine (sitll test for some phone-specific oddities (usually not to do with responsive issues)).

3 Likes

My approach is the same as Ryan’s and is the only viable approach these days as there are literally hundreds of devices all at different widths, resolutions and orientation.

Base your breakpoints on the design and in that way you cater for all devices automatically.

Alright

Yeah that is what I started to think as well.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.