JS calls different CSS files depending on the screen size

Reason: Screen size is not the same, the site seems to always feel strange, so, for different size of the screen, write a different CSS, finished, to solve the problem is: how to screen size to reference different CSS, the following is the solution.

Workaround: First, a generic CSS file is referenced first in the head tag, as follows:

<link href= "styles/style.css" id= "CSS" rel= "stylesheet" type= "Text/css"/> This time, you will find that this and the usual reference to the CSS file is slightly different, that is, Added an ID, which adds an ID to the CSS ID. Next, get another JS, the code is as follows:

1234567891011121314

$(function() {            //判断是否宽屏            varwinWide = window.screen.width;            alert(winWide);            varwideScreen = false;            if(winWide <= 1024) {//1024及以下分辨率                $("#css").attr("href", "Styles/Style1.css");                alert(‘小屏‘);            } else{                $("#css").attr("href", "Styles/Style.css");                alert(‘大屏‘);                wideScreen = true; //是宽屏            }})

Well, the code is so simple, you crossing, you look at it ... Category: Front-end reprint: http://www.cnblogs.com/xmiao/p/6144355.html

JS calls different CSS files depending on the screen size