Mobile first media queries

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Mobile first media queries

Post 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) {
}
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Mobile first media queries

Post 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
Post Reply