Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Christine Felter
849 PointsAre 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
James Gill
Courses Plus Student 34,936 PointsChristine 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.
Pedro Ferrari
14,295 PointsAlthough 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!
Christine Felter
849 PointsThanks Pedro
Miguel Palau
24,176 PointsYou 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
Christine Felter
849 PointsThanks Miguel
Miguel Palau
24,176 PointsMiguel Palau
24,176 PointsHey 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 a320pxwide 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.