Page 1 of 1

Mobile first media queries

Posted: Fri Mar 04, 2016 7:15 pm
by Don Chambers
This seemed like a good reference, so I am posting it here. If you are using something different, please post that here as well.

Code: Select all

/*==========  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) {
}

Re: Mobile first media queries

Posted: Sat Mar 05, 2016 12:09 pm
by yellowled
Don Chambers wrote:This seemed like a good reference, so I am posting it here. If you are using something different, please post that here as well.
  • Try to not use px values for your media queries but em instead.
  • (The descriptions of) These ignore orientation. Keep in mind that 320px is an (older) iPhone in portrait mode, but 480px can be the same iPhone in landscape mode. (That being said, I aassume few people actually use landscape mode for browsing because apps – other than games – tend to ignore it.)
  • Do not use media queries based on devices, but craft them according to what the design needs. For example, if you need to/can use a larger logo on (min-width: 25em), why not use that? (That being said, the device-based queries usually are a good starting point.)
  • You have no idea what devices people are and (more importantly) will be using to view your site. Try to ignore devices altogether. (For instance, “iPhone Retina” is no longer just 320px/20em. My iPhone 6 has a viewport width of 375px/23em.)
  • Make room for more large media queries. 1200px (or 75em) is nothing these days. (Even lower-tier laptops often come with 1440-1600px.) A 27" Cinema Display comes with 2560x1440px, that's more than double of the largest media query used here. It depends on the layout, but most layouts can make better use of 2560px than 1200px.
YL