Different Stylesheets for Differently Sized Browser Windows

A great tip from CSS Tricks on how to include different CSS files depending on the size of  the browser window. It can be done in two ways: with normal XHTML markup or with the help of some jQuery.

Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available.

There is a W3C standard way of declaring them. One way is to test the “device-width”, like this:

<link rel=”stylesheet” media=”screen and (min-device-width: 800px)” href=”800.css” />

The above code will apply the 800.css styling to the document only if the device viewing it has a width of 800px or wider. And… supports “media queries” in this way.

Read the full post here


  1. Calvin says:

    For along time I have been having problems with devices sizes I do a nice website on 1024px on viewing it on 800px it becomes a total mess

    Thanks so much Keen

Leave a Reply

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>

  • KEEN Media Lab on LinkedIn