CSS uses different style sheets for browser windows of different sizes

Transferred from: http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/

The same website, access to its browser may be different width, common with 320px,480px,800px,1024px,1280px,1920px, etc., for different sizes of browser windows to provide different access effects, improve the user experience, At the same time, the website itself can provide different resources for different audiences.
Here are two different browser windows solutions, both of which apply to Internet Explorer and other non-ie kernel browsers.

Defined by the standard, for example:

View Sourceprint?
<link rel= "stylesheet" media= "screen and (min-device-width:800px)" href= "800.css"/>
The above code indicates that the 800.CSS style will be used when the device browser that accesses the Web site has a width greater than or equal to 800px.

Another example:

View Sourceprint?
<link rel= ' stylesheet ' media= ' screen and (min-width:701px) and (max-width:900px) ' href= ' css/medium.css '/>
The above code indicates that when the device browser that accesses the website is between 701px and 900px wide, the medium.css style is used.

The current version of Mozilla, Opera and WebKit are supported by this standard, unfortunately IE does not support this standard, including IE8, and IE9 Previous.

Don't worry, scenario two will resolve this issue.

Second, using jquery to dynamically adjust the page style
1, first define two link, of course you can also be one, the second is to change the CSS

View Sourceprint?
<link rel= "stylesheet" type= "Text/css" href= "Main.css"/>
<link id= "Size-stylesheet" rel= "stylesheet" type= "Text/css" href= "Narrow.css"/>

2. The following JavaScript code will change the CSS according to the different browser size

View Sourceprint?unction Adjuststyle (width) {     width = parseint (width);     if (Width < 701) {         $ ("#size-stylesheet"). attr ("href", "css/narrow.css");     } else if (width >= 701) &&am P (Width < 900)) {         $ ("#size-stylesheet"). attr ("href", "css/medium.css");     } else {        $ ("#size-stylesheet"). attr ("href", "css/wide.css");}     } $ (function () {     Adjuststyle ($ (this). width ());     $ (window). Resize (function () {         Adjuststyle ($ (this). width ());     });

View Examples:

Example 1 Example 2 Example 3 download all examples
English Original: http://css-tricks.com/resolution-specific-stylesheets/

Copyright notice: When reproduced, please indicate the original source and author information and this statement in the form of hyperlinks.
Article Reference address: Http://www.iefans.net/liulanqi-shichuang-butong-yangshibiao/iefans

CSS for different sizes of browser windows using different style sheets