CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Are there standard media query break points?

With all of the various devices being used, is there any list of standard break points to start with?

3 Answers

Christine Felter You definitely should not use breakpoints based on specific devices. This was done years ago, but it's a no-no now. Instead, choose breakpoints that make sense for your content.

There are no common set of breakpoints that always just work, so you'll have to experiment. Try a few common breakpoints (like 480 and 768px), view the results, and keep going.

Also, you can choose to use min-width or max-width, depending on if you're starting with desktop and working downward (graceful degradation), or starting with mobile and working upward (progressive enhancement, which is preferred).

Last: many folks now use relative units for media queries rather than pixels--for example, 22em instead of 960px. It's worthwhile to learn about, because it's the way things are going.

Miguel Palau
Miguel Palau
24,176 Points

Hey James that answer kind of makes sense if/when you are in control of the design.

I work at a Front End development company where we usually are given a set of files to transform into HTML or Wordpress or Tumblr or Ionic etc

So usually the way to go is to set the breakpoints to the sizes of the provided documents (sketch, psd, ai) and have them be pixel perfect at those exact points and reasonably flow between sizes.

The problem that a lot of times happen is when the designer has too much of a vote to say and sometimes can complain if you move things around for them to make sense: for instance the designer sent you a 750px "mobile" design but those measures won't look good on a 320px wide iPhone 5 screen and unless you have actually a say towards the end client you can't just mess with the "designers vision" (like reducing font size, or paddings or anything in that matter)

So yeah I agree with that point of view that breakpoints should be used according to what you see on the browser and your content.

But in real life sometimes its not that simple haha.

Some real life projects I've done/contributed the front end for:

https://www.zaglearning.com/

http://griph.nl/

http://www.mbfirm.com/

https://auth0.com/wordpress

http://www.mimole.com/

Among maany more thanks for treehouse for teaching me the solid basics.

Just giving my two cents on the matter.

Hi Christine Felter

Although you should always take into consideration your own project, since you can have min-width and max-width for main elements on the page and you don't want them to break apart in some cases; there are a few standard break points defined by Bootstrap — and the industry usually follows.

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

Glad to help a fellow student, Cheers!

Thanks Pedro

Miguel Palau
Miguel Palau
24,176 Points

You should really just use your own content as guide. Keep looking for when it starts to look weird and add a new breakpoint.

I usually do 600px, 850px and 1200px

And even most of the times up to the 850px mark will do just fine.

Try to use sass and make your mediaqueries into mixins for extra ease of use there's a course in here as well for that.

This is an example I did for a client using everything learned both from treehouse and from the devtips channel on youtube

http://bodasoaxaca.com/

Thanks Miguel