js 根據屏幕大小調用不同的css文件

原因:屏幕大小不一樣,網站看起來總覺得怪怪的,所以,針對不同大小的屏幕,寫了不同的css,寫完了,要解決的問題就是:怎麼根據屏幕的大小來引用不同的CSS,下面就是解決方法了.

解決方法:首先,在head標籤裏面先引用一個通用的CSS文件,如下:

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

這時候,你會發現,這個和平常引用的CSS文件有些許不同,那就是,多加了一個ID,這裏面就增加了一個id爲css的id.

接下來,再弄一個js,代碼如下:

 $(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; //是寬屏

            }

})

好了,代碼就是如此簡單,各位看官,自己看着辦吧...

不是伸手黨的話,就點個推薦,或者收藏一下,有空閒的,給個小評論咯...