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
