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

• You should add a default stylesheet without a Media Query, wich always will be interpreted by the browser.
• Then you can add one or more stylesheets with a Media Query. First you should add the keyword 'only' to hide this stylesheet from older browsers, followed by the media type and the Media Query itself. Example: media="only all and (max-width: 801)"

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>

• Default: black background-color
• under 820px: red background-color
• above 1100px: blue background-color

Limitations

• The script only supports the Media Queries max-width, min-width in px units combined with the keyword 'and' ('or' is not supported).
• Although you can mix media types with and without a Media Query in one stylesheet (i.e.: media="only screen and (max-width: 480px), handheld") or multiple media types with one or more media queries (i.e.: media="only screen and (min-width: 1025px) and (max-width: 1600px), only projection and (min-width: 1025px) and (max-width: 1600px)"), you can not use multiple media types with multiple different Media Queries (i.e.: media="only screen and (min-width: 1025px), only projection and (min-width: 1200px)" <- this will fail). To achieve this you have to add another link.

Back to protofunc