1. Create a basic HTML document with a header and some simple content.
snippet
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Solution 8-1</title>
</head>
<body>
<header>
<h1>CSS3 Media Queries</h1></header>
<section></section>
<footer></footer>
</body>
</html>
2. Add the link to the general style sheet meant for every device:
<link href="css/style.css" rel="stylesheet" type="text/css" />
This style sheet contains the style rules you want to apply regardless of the device output.
3. Set the different style rules for the various screen sizes using media queries.
<!-- Smartphones -->
<link href="css/phone_style.css" rel="stylesheet" type="text/css"
media="only screen and (max-device-width:320px)" />
<!-- Tablets -->
<link href="css/tablet_styles.css" rel="stylesheet" type="text/css"
media="only screen and (min-device-width:321px) and (max-device-width:768px)" />
<!-- Desktops -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />
Here you have a style sheet specifically targeting smartphones, another one for digital tablets, and one for desktops (and laptops).
4. Internet Explorer versions 6 through 8 will ignore any media queries and skip the related style rules. So you need to create a style sheet for them using a conditional statement.
<!--[if It IE 9>
<link href="stylesForIE.css" rel="stylesheet" type="text/css">
<![endif]-->
5. Now add a style sheet for older mobile models as well, by using the handled media type:
<!—Older mobile phones -->
<link href="css/old_mobiles.css" rel="stylesheet" type="text/css" media="handled" />
6. Finally, add the link to the style sheet destined for the print media type:
<!-- Print -->
<link href="css/printer_style.css" rel="stylesheet" type="text/css" media="print" />
