i can code! for Web.: Targeting screen sizes by using media queries

Sunday, September 25, 2011

Targeting screen sizes by using media queries

In this exercise, we have two css files, desktop.css and mobile.css. In our HTML, dualcss.html, we will load the suitable css according to the browser width (not the device screen width in this exercise).

desktop.css

body {
 font-size: 50px;
 font-weight: bold;
 font-family: Arial;
}
a { font-style: italic; }
h1 {
 font-size: 50px;
 font-weight: bold;
 font-family: Arial;
}

mobile.css

body {
 font-size: 10px;
 font-weight: bold;
 font-family: Arial;
}
a { font-style: italic; }
h1 { font-style: italic; }

dualcss.html

<html>
<head>
 <title>i can code! for Web: Dual CSS</title>
 
 <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width: 480px)" />
 <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
 
</head>
<body>
 <h1>i can code! for Web: Dual CSS</h1>
 <p><a href="http://icancode-4-web.blogspot.com/">http://icancode-4-web.blogspot.com/</a></p>
</body>
</html>

i can code! for Web.

Sunday, September 25, 2011

Targeting screen sizes by using media queries

No comments:

Post a Comment