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

转载 2013年12月03日 17:09:28
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的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//是宽屏
            }
})
好了,代码就是如此简单,各位看官,自己看着办吧...

不是伸手党的话,就点个推荐,或者收藏一下,有空闲的,给个小评论咯...

根据分辨率不同,调用不同的CSS文件

根据分辨率不同,调用不同的CSS文件根据分辨率不同,调用不同的css文件 dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BO...
  • myfreeway
  • myfreeway
  • 2006年09月21日 09:12
  • 699

用js实现根据不同的分辨率和浏览器调用不同的css文件

方法一:(根据ID设定) if (screen.width == "800") { document.getElementById("MyCSS").href="80...
  • daocaorencrl
  • daocaorencrl
  • 2014年05月23日 12:00
  • 2300

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

原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先...
  • jeffrey9061
  • jeffrey9061
  • 2013年11月06日 10:20
  • 5821

分针网—IT教育: 根据屏幕大小,加载不同大小的图片

引言 今天要介绍的东西,很简单,但是对于前端响应式的时候是个很重要的知识; 我们在用bootstrap这类前端框架时, 虽然页面局部通过m...
  • dansuwei1234
  • dansuwei1234
  • 2017年05月10日 09:32
  • 254

css响应式程序设计-根据屏幕尺寸显示不同CSS

  • baohanqing
  • baohanqing
  • 2016年05月20日 15:29
  • 1016

根据屏幕分辨率大小加载不同CSS.

一、根据屏幕分辨率大小加载不同CSS. html> head> html; charset=gb2312" /> var w=window.screen.width;//先获取屏幕分辨率大小 ...
  • dihuangtian01
  • dihuangtian01
  • 2016年09月30日 15:54
  • 1496

JS判断各种浏览器,根据判断动态引入不同的CSS文件、JS文件

JS判断各种浏览器,根据判断动态引入不同的CSS文件、JS文件 function getBrowser() { var ua = window.navigator.userA...
  • mazhili1991
  • mazhili1991
  • 2016年12月01日 15:14
  • 3183

根据屏幕大小确定是否显示div

根据屏幕大小确定是否显示div 自适应的div 待在右下角的div 右下角不动的div...
  • po123op123
  • po123op123
  • 2017年04月24日 12:44
  • 278

根据设备不同,加载不同尺寸图片

针对自适应网站,图片是最难把控的,特别是banner类型的大图片。 js: $(function(){ //根据不同浏览设备,加载不同图片 pic_html(); function pic_ht...
  • comeonstone
  • comeonstone
  • 2016年01月14日 17:25
  • 1726

根据屏幕的尺寸决定图片的显示大小

在app中我们一般都会下载图片,那么我们如何决定图片的大小呢,给图片固定一样的高度、宽度是不合理的,那么我们需要根据屏幕的尺寸来决定图片的大小。首先,我们需要计算屏幕尺寸,我们可以写一个工具类,用的时...
  • uniquemei
  • uniquemei
  • 2017年02月20日 14:18
  • 732
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 根据屏幕大小调用不同的css文件
举报原因:
原因补充:

(最多只允许输入30个字)