Advertisement
CSS

CSS Media Queries

Post image

Media queries are great, and since CSS 2 they've paved the way for responsive web design. The problem many designers now face is remembering all the different media queries for different devices. Below is a collection of my most used media queries. Enjoy!

Quick Navigation

Standard
·
iPad
·
iPhone

Generic Media Queries for Standard Devices

Here's a list of generic media queries that will work across multiple devices.

Smartphones

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) { 
	/*
	*	ADD YOUR Smartphone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape)' href='[LINK TO CSS HERE]' />

Desktops and Laptops

Embedded query:

@media only screen and (min-device-width: 1224px) { 
	/*
	*	ADD YOUR Desktop and Laptop CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 1224px)' href='[LINK TO CSS HERE]' />

Large Screens

Embedded query:

@media only screen and (min-device-width: 1824px) { 
	/*
	*	ADD YOUR Desktop and Laptop CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 1824px)' href='[LINK TO CSS HERE]' />

iPad

Thankfully Apple are very consistent with device width and height, making iPad specific queries very easy to do. The following should work perfectly for creating iPad responsive websites -

iPad - portrait and landscape

Embedded query:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
	/*
	*	ADD YOUR iPAD CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 768px) and (max-device-width : 1024px)' href='[LINK TO CSS HERE]' />

iPad - landscape

Embedded query:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 
	/*
	*	ADD YOUR iPAD CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)' href='[LINK TO CSS HERE]' />

iPad - portrait

Embedded query:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 
	/*
	*	ADD YOUR iPAD CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait)' href='[LINK TO CSS HERE]' />

iPad Retina vs. Non-retina

If you're creating a very specific Apple based website, you may decide to display different designs depending on the type of iPad being used. The only difference between the two is the pixel ratio. Add following code into the query where needed:

iPad Non-retina (iPad 1 & iPad 2):

-webkit-min-device-pixel-ratio: 1

iPad Retina:

-webkit-min-device-pixel-ratio: 2

iPhone

With Apple changing the device size with the iPhone 5 there's slightly more media queries specifically for the iPhone.

Note: The following iPhone 5 queries will also encapsulate the older generation iPhones.

iPhone 5 - portrait and landscape

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { 
	/*
	*	ADD YOUR iPhone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 568px)' href='[LINK TO CSS HERE]' />

iPhone 5 - portrait

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) { 
	/*
	*	ADD YOUR iPhone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait)' href='[LINK TO CSS HERE]' />

iPhone 5 - landscape

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) { 
	/*
	*	ADD YOUR iPhone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation: landscape)' href='[LINK TO CSS HERE]' />

iPhone 2G - 4S - portrait and landscape

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
	/*
	*	ADD YOUR iPhone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 480px)' href='[LINK TO CSS HERE]' />

iPhone 2G - 4S - portrait

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) { 
	/*
	*	ADD YOUR iPhone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait)' href='[LINK TO CSS HERE]' />

iPhone 2G - 4S - landscape

Embedded query:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) { 
	/*
	*	ADD YOUR iPhone CSS HERE
	*/
}

Linked query (replace [LINK TO CSS HERE] with URL to .css file):

<link rel='stylesheet' media='screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape)' href='[LINK TO CSS HERE]' />
Advertisement
You may also like:
comments powered by Disqus