Friday, October 15, 2010

Applying Style-Sheets based on acreen size

<!--for screens less than 480 px-->
<link href="Style1.css" rel="stylesheet" type="text/css" media="screen and (max-width:480px)" />

<!--for screens less between 480 px and 600px-->
    <link href="Style2.css" rel="stylesheet" type="text/css" media="screen and (min-width:480px) and (max-width:600px)" />

<!--for screens greater than 600px-->
    <link href="Style3.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px)" />

More on this here.

I wonder what would happen if the screen size is exactly 480. Does max-width include 480 or does it stop at 480? Will post an update if and when I come across the answer.

No comments: