Hi All, just wondering if there are any standard/official/best practice pixel values for doing media query cutoffs. I tend to use the widths 320, 375, 425, 768, 1024, 1440, 2560 (all in pixels) as they are what comes up in Chrome’s Device Toolbar (web inspector).
However, as I’m not yet in the industry, I don’t know if I’m following best practices. What cutoffs do you use? Do you use pixels or other units (ems/rems)?
Thanks. Happy Coding 
Hello, sgedye.
I am not aware of any official standards, but w3schools recommend the Mobile First approach with widths 600px, 768px, 992px, and 1200px. They call them the Typical Device Breakpoints.
In my opinion, I would say that the values should be based around the breakpoint of your webpage - where the content in your page begin to overlap/need horizontal-scroll.
Otherwise, I almost only use em and %. The only time I would consider using px is for CSS animations.
Hope this is useful.
Hmm, that’s interesting… thanks for the advice. I only ask because I was given a coding test as part of an interview and they told me I had used random media query breakpoints. Thought that maybe there was a standard that I didn’t know about 
I almost always do my breakpoints in ‘em’ instead of ‘px’ because it makes the page responsive to text size changes as well. I don’t have a list of official breakpoints that I always use because as @Sky020 said above, they should be based on the requirements of your content. Sometimes I only have one. Sometimes I have several scattered all over the place for different sections of my page.
w3schools recommend the Mobile First approach with widths 600px , 768px , 992px , and 1200px
Hmm, these are also pretty much the same as Twitter Bootstrap (xs: <768px, sm: ≥ 768px, md: ≥992px, lg: ≥1200px) so probably a good starting point.
I almost always do my breakpoints in ‘em’ instead of ‘px’
Yes, I should look in to ‘em’ and ‘rem’ a bit more, I am overly reliant on ‘%’, ‘vw/vh’ and ‘px’.
they should be based on the requirements of your content
I completely agree, although I usually like to just have a few break points with repeating values (ie. using 992px in two different sections, rather than 992px in one and 999px in the other), so I in a simplified example, I may have:
Intro Section : Mobile, break at ≥992
Main Section: Mobile, break at ≥768, break at ≥992, break at ≥1200
Footer Section : Mobile, no breaks