Tag Archives: jQuery

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

  • KEEN Media Lab on LinkedIn