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

Posted 禅趣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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//是宽屏
            }
})

 

好了,代码就是如此简单,各位看官,自己看着办吧...
 
分类: 前端
转载:http://www.cnblogs.com/xmiao/p/6144355.html

以上是关于js 根据屏幕大小调用不同的css文件的主要内容,如果未能解决你的问题,请参考以下文章

如何根据分辨率调用不同的css文件

网页根据屏幕大小来加载css文件,在手机上可以完美加载指定的css,但是在电脑上就加载不了指定的css?

如何在 Angular 中根据屏幕大小设置不同的 CSS 类?

根据img大小而不是屏幕大小使用HTML5或CSS3加载不同的图像[重复]

CSS Flexbox - 根据屏幕大小组织弹性项目

根据屏幕大小切换 CSS 类