CSS 3 Media Queries for all Browser (jQuery Plugin)

The script adds basic Media-Query-Support (min-width and max-width in px units ) to the browsers. It helps you to create a dynamic resolution dependent layout with webstandards in mind.

How to use:

Add your stylesheets

Add the JavaScript

Simply add the Javascript under all linked stylesheets.

<script src="jquery.mediaqueries.js" type="text/javascript"></script>

Example:

<link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1200px)" /> <link rel="stylesheet" type="text/css" href="handheld-iphone.css" media="only screen and (max-width: 480px), handheld" /> <script src="jquery.mediaqueries.js" type="text/javascript"></script>

Example form this Page:

<link rel="stylesheet" href="default.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1100px)" /> <link rel="stylesheet" type="text/css" href="smaller.css" media="only screen and (max-width: 820px)" /> <script src="jquery.mediaqueries.js" type="text/javascript"></script>

Limitations

Back to protofunc