js 根据屏幕大小调用不同的css文件

原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了.

 

解决方法:首先,在head标签里面先引用一个通用的CSS文件,如下:

    <link href="Styles/Style.css" id="css" rel="stylesheet" type="text/css" />

这时候,你会发现,这个和平常引用的CSS文件有些许不同,那就是,多加了一个ID,这里面就增加了一个id为css的id.

 

接下来,再弄一个js,代码如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

 

好了,代码就是如此简单,各位看官,自己看着办吧...