Hey guys, I'm using bootstrap and their default media queries are as follows.

 

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

 

Say I wanted to develop for screen sizes above 1200px, what would you suggest using as min / max width? Is there any rule of thumb for working out what the next value would be?

Hey guys, I'm using bootstrap and their default media queries are as follows.

 

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

 

Say I wanted to develop for screen sizes above 1200px, what would you suggest using as min / max width? Is there any rule of thumb for working out what the next value would be?

 

Entirely down to you and the actual content. If you're using SVG for your images, then you're sorted. For text, you should measure your reading lengths and adjust accordingly. Ideally it's always great if you have the physical devices to fine tune everything, but I suppose you could target for HDTV resolutions such as 1920. Personally I don't have a rule of thumb as a lot of the breakpoints I use sometimes max out at 1600px

 

Of course it all depends. I sometimes target around the 1600 mark, well, I use ems rather than pixels for measurement. Other times setting a container (if you use one) with a width of 95% with a max-width of 1600px can work, but I'm just going to repeat the same thing - depends on the content. Test test test

I would like to add mixing min-width and max-width media queries could also work very well in some cases.

At least I find it very handy - not strictly desktop first, but also not strictly mobile first.

There is not any restrictions to use size of the device width.

 

If your screen resolution is above 1200px , you can mension the media query

 

@media screen and (min-width 1200px) and (max-width 1400px) { }

 

you can set the with depends upon you screen size.