Targeting multiple device using Media Queries

1. Create a basic HTML document with a header and some simple content.
<meta charset="utf-8">
<title>Solution 8-1</title>
<h1>CSS3 Media Queries</h1></header>

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">

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" />
Related Tutorial
Follow Us #