Dimension Size in media Query

Hi,

There are a very large number of different devices with different dimension. So how can sort out this problem because we can’t give all dimension in media Query.
So what will be the best size in different media query that can fit in most dimension.
I use following media query:


@media only screen and (max-width: 750px)

@media only screen and (max-width: 500px)

@media only screen and (max-width: 350px)

{

Is this enough or we need to define more sizes.
Thanks

Hi,

You more or less answered your own question with this comment:

There are a very large number of different devices with different dimension. So how can sort out this problem because we can’t give all dimension in media Query.

There are hundreds of devices all with different viewports for landscape and orientation so the best thing you can do is to design for none specifically but design to encompass all. You do that by forgetting completely about device sizes and concentrate on your design instead.

This means that the breakpoints in your media query will depend upon when the design needs to change because it either doesn’t fit or it looks awkward. These breakpoints will be different for each design that you do and relate to the work in hand only.

You can do this all in the desktop by opening and closing the browser window across the whole range and and making sure your design looks good at all sizes. Where elements are too big or look bad then throw in a media query and adjust them to fit better. With a few well placed media queries you can make most fluid/elastic sites fit nicely across the whole range which means that they will fit nicely on nearly all devices also without needing to know anything about the specific size of a device.

Device chasing is bad (unless you are just building an app for a certain device) because you never know what size the next device will be. Who knew about the ipad mini a few years ago (or even the ipad). There are just so many tablets and phones and desktops around that you can never cater for all specifically by size (with portrait and landscape thrown into the mix at all) so do your self a favour and don’t design for any of them; design for all of them.

This mean we just need to shrink our browser and check at which point or size our design is breaking. Then we can use this size and adjust our website according to that one.

Yes its basically as simple as that :slight_smile:

There are some good articles about on the subject that are worth a read.