CSS3 Media Queries

CSS3 Media Queries for Different Devices

Written by Kenny on March 31, 2012 CSS3
We can use CSS3 Media Queries to build websites which able to display well or look different on different devices without changing content.

CSS3 Media Queries for Different Devices

Hi there! Today we’re going to talk about CSS3 Media Queries for different devices like desktops, mobiles phones, notebooks, tablets and etc. As CSS3 extends CSS2.1 ‘Media Type’ property, we can use new CSS3 Media Queries to build websites which able to display well or look different on different devices.

CSS3 Media Queries

How it works? CSS3 Media Queries able to check for certain conditions and apply different stylesheets on it. For example, you could have one stylesheet for desktop device and a different one for mobile phones devices. It is surely helps a lot since we can have a mobile page without changing the content but just with CSS.

Continue on below to see the CSS Media Queries for different devices, or see the live action through demo!

 

CSS3 Media Queries Markup

CSS3 Media Queries will uses max-width and min-width to check for browser viewing resolution and apply the stylesheet only if conditions are met.

/* Use max-width */
@media screen and (max-width: 600px) {
	h1 {
		font-size: 24px;
	}
}
/* Use max-width */
@media screen and (min-width: 900px) {
	h1 {
		font-size: 33px;
	}
}
/* Or mix both */
@media screen and (min-width: 600px) and (max-width: 900px) {
	h1 {
		font-size: 28px;
	}
}

Also, CSS3 Media Queries support for actual device screen detection through device-width media query.

/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
	.class {
		background: #000;
	}
}

#Note: max-device-width refers to the width of the device’s entire rendering area (the actual device screen). While max-width refer to the width of the target display area (the browser).

Of course, you can also use media query to detect orientation (portrait or landscapes) as well. However these media queries only work for the iPad.


/* iPads (landscape) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.box {
		width: 500px;
	}
}

/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.box {
		width: 300px;
	}
}
#Note: To have your stylesheet works well in different devices, you must include viewport meta inside header. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

Separate Media Query Stylesheets

If you wish to have different stylesheets for different devices, you can call the stylesheets like following way.


<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" />
<link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />

 

CSS3 Media Queries for Standard Devices

That’s all about CSS3 Media Queries. Below shown the media queries for standard devices, you can incorporate these at the bottom of your existing stylesheet, and define own styles for different devices on it.

After that resize your browser, it should works!

#Note: Unfortunately IE8 and below doesn’t support for CSS3 Queries Media, but IE9 and above does!
/* 1024px Screen */
@media screen and (max-width : 1024px) {
	/* CSS Styles */
}

/* 800px Screen */
@media screen and (max-width : 800px) {
	/* CSS Styles */
}

/* 640px Screen */
@media screen and (max-width : 640px) {
	/* CSS Styles */
}

/* iPad with landscape */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
	/* CSS Styles */
}

/* iPad with portrait */
@media screen and (max-device-width: 768px) and (orientation: portrait) {
	/* CSS Styles */
}

/* Smartphones and iPhones */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
	/* CSS Styles */
}

View Demo Download Sources


» This Might Interest You «

User Feedbacks (5) Share Your!

  • cykan

    Thank you very much! :)

    2 years ago! Reply
  • Hi is the last bit of CSS, with the specifications for “Smartphones and iPhones”, supposed to say MAX- rather than min-device-width: 480px ?

    Lines 21-23 above.

    2 years ago! Reply
    • Hi Michael,

      Thanks for noticing me about this. =)

      2 years ago! Reply
  • Dude, you are very, very insanely good with Web Design lol. I know about Media Queries, Javascript etc, but I still enjoy reading your posts for an even better understanding, very simple to follow

    2 years ago! Reply
    • Thanks for reading Mariano…

      2 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>