What is the best @media (max-width) queries I can use to target devices?

What happen in a situation where I develop a site for desktop first and I’d like to target smaller device ( Tablets, mobile) screens… what’s the standard “max-width” measurements to target these smaller devices when you scale down??

These days there are are no ‘standard widths’ as there are just too many devices about (literally hundreds all different sizes, orientations and resolutions). Some phones have bigger displays than tablets and some tablets are now larger than laptops. Some laptops are bigger than desktops and so on… Indeed on my large monitor desktop I have many browser windows open at the same time so some windows may be as small as the one on my phone.

It is fruitless to think in terms of devices these days and the only real thing that should concern you is the space available that is required to show your design in its best light. The breakpoints are indeed dictated by the design that you use and not the device that it is viewed upon.

On a desktop grab hold of the side of the viewport window and slowly make the page smaller and smaller. At some point along the way the design will look awkward or not fit very well. It’s at this point that you would throw in a media query and make things look better. If you use a fluid design you can cater for all devices with just a few well chosen media queries. You don’t need to know about what new device has arrived as long as your page can go from 320px and upwards and look good across the whole range.

Forget about devices and orientation as all you are really interested in is the space available to show your design so concentrate on your design and adjust the breakpoints to suit the job in hand.

Flexbox and grid now give you the flexibility to create fluid designs with minimal media queries so keep things as simple as possible.

Frameworks like bootstrap tend to work with a pre-determined set of breakpoints but that is what makes them all look the same and doesn’t account for variations in design. Some times there is no need for a media query if you have built something simple and used fluid constructs.

Forget devices and screen widths and concentrate on the needs of the design. :slight_smile:

5 Likes

Thanks Paul, but what’s a fluid layout or design and how does it work??

Imagine a page full of text and no CSS.

That’s as fluid as you can get and will work everywhere from the beginning of time and until the end of time on any device that supports text.

It’s only when you start adding CSS and making things rigid that you run into problems. :slight_smile:

First you try to make assumptions about devices and screen sizes when in fact there are none. The web isn’t square or oblong, it doesn’t have a fixed paper size. There are no edges. It does not correspond to print in any form.

Of course a page full of text that stretches all the way across the screen is not very usable so you then start to build in some form to it with css without losing the fluidity. For arguments sake you would avoid applying a width to the content but if the content is just text then setting a max-width would stop the text getting too wide.

Therefore a simple fluid layout could simply be.

.container{max-width:1280px;margin:auto;}

The page will scale up and down over all devices and the reader gets the information that they were looking for.

The next step is to organise the navigation and maybe to add some ‘pretty pictures’ (if you really must) and the skill comes in using techniques that allow for some fluidity. Don’t apply fixed widths (or heights) to anything that holds fluid content like text and make sure that images can scale smaller if needed (or bigger in some cases). Again this is easily achieved with max-width:100% or sometimes width:100% on the image concerned but also setting the height to auto so it maintains aspect ratio.

You may want a site that has three columns and flexbox can do this easily and then depending on the content in the columns you may want to go down to 2 columns and then one column at some point. Your design will tell you when this needs to happen. In some cases flexbox and css grid can automatically reduce the columns as space gets squeezed without the need for media queries but generally you would use a media query when the design looks awkward or squashed and then make it better.

Avoid fixed widths and try and let elements shrink and grow with the space available. You can use min and max widths to good effect to create a fluid design that adapts to every screen size. Don’t try to paint every pixel into a corner but let the design breathe and flow.

Remember that ultimately its the user that has control. They can set up user stylesheets to control the font, text size and colours, zoom size not to mention the width and height of the viewing platform of their choice.

The skill of a good designer is to think about all these eventualities and to allow their design the freedom to adapt to the unknown. :slight_smile:

1 Like