Question on media queries

#1

Hey Guys I’m doing the media queries for my website and just wanted to know if its common practice to have multitudes of media queries. I started out doing 3. 1 for mobile another for tablet and the last for desktop. However I ended up doing like 5 between all of those so my website looks good on every possible screen size. I feel like i could go forever. I’m using chrome and did a media query for every device they have on there, all the way from the pixel 2 to the ipad pro. But i can still adjust the screen size in some instances and break it causing me to write a whole new media query just to fix one thing. Is this right way to do it?

0 Likes

#2

I tend to do media queries in sections. In other words, a set of media queries for the header, one for the navigation, one for specific page layouts, etc. And in those sections the breakpoints to make things look good on all screen sizes might be different from those in another section. It’s not about catering to particular device types, but to what happens to a part of the website in different screen widths.

But if you choose the breakpoints carefully, you can usually avoid making too many minute changes to, say, a section width.

4 Likes

#3

That’s an interesting approach. Do you use chrome? Would you say I’m good if I have all of chromes preset devices covered like the ipad, ipad pro, galaxy, iphone 5/6/7 etc. Or is it common to fix all the stuff in between?

0 Likes

#4

Stop chasing devices. I believe there are about a hundred variation of devices all with different portrait and landscape variations. It is impossible to know all the devices that exist; ether now, in the past or in the future.

What you are essentially interested is how your design behaves at all widths irrespective of device. You can do this on the desktop by opening your browser window width and then slowly closing it. If at any point in the process the design looks awkward or broken then that’s the point you add a media query and make it better. Do this from wide down to 320px.

In that way you cater for all devices that exist now and in the future. Using a fluid design and a few well chosen media queries you will automatically have coded for all devices.

Of course there will be the odd tweak required for a mobile but usually that is because of a flaw made during the process mentioned above.

If your design needs too many media queries then your design is likely too rigid and may need a rethink. Remember that ultimately the control of the site is in the hands of the user and they may be using user fonts and user font sizes and have their own display resolutions. Your design needs to be fluid enough to handle this because such is the life of a web developer :slight_smile:

Remain device agnostic. Code fluid designs and test in at least 3 modern browsers during each stage of development and don’t wait until the end before you test.

On a large site I generally group the media queries with the code that they refer to. I hate jumping back and forward through code to find things. On a small site though you can put the media queries all together at the end.

5 Likes