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

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

js 根据屏幕大小调用不同的css文件的更多相关文章

  1. js获取屏幕大小

    1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...

  2. cocos2d-x JS 获取屏幕大小或中点

    以一张背景图为例: var HelloWorldLayer = cc.Layer.extend({ ctor:function () { this._super(); var bg = new cc. ...

  3. 根据浏览器显示界面大小变换,替换css文件方法

    在1024屏幕下,选择适配1024屏幕的css文件, 在大于1024屏幕下,选择适配大屏幕的css文件. 在html中的head标签中引用css文件时,加入media属性. 例: <link r ...

  4. 【转】Ext JS 集合1713个icon图标的CSS文件

    原文:http://extjs.org.cn/node/715 由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上 ...

  5. js 获取手机浏览器类型,修改css文件的class的值

    /*========================================= 函数功能:获取浏览器类型 =========================================*/ ...

  6. js通过查看屏幕大小,更改其他css属性

    首先,我们要知道如何得到屏幕的相关数据. <html><head><title>获取当前对象大小以及屏幕分辨率等</title><body> ...

  7. 如何根据屏幕大小改变class的css样式

    /*当屏幕小于1200px*/ @media (max-width:1200px) { ...} 此处针对所有小于1200px屏幕的css属性. /*当屏幕小于1200px且大于992px*/ @me ...

  8. 【转载】JS获取屏幕大小

    前些日子需要给项目的弹窗上面罩,因为项目左侧是树形菜单,右侧嵌套的iframe ,iframe 的内容不是固定大小,那么,面罩的大小也就不是固定的 因此,用到了JQuery获取当前页面的窗口大小,于是 ...

  9. 根据不同的屏幕宽度引入不同的css文件

    <link rel="stylesheet" href="css/jl_public.css?v=11"/> <link rel=" ...

随机推荐

  1. ThinkPHP框架的一些基础应用

    这是俺滴师傅给俺传授了的知识,特在此分享. TP框架,做PHP开发的都应该有所耳闻.下面,我们就来说说入口文件的生成: 创建新项目时,首先,在目录文件下创建一个新的文件夹.然后将Thinkphp框架文 ...

  2. 解决:No module named pkg_resources

    今天在装bleach的时候,发现bleach依赖的其中的一个库是html5lib,从pypi下载源码包,执行python setup.py install,报错了: 提示我的setuptools版本过 ...

  3. MySQL数据表range分区例子

    某些行业数据量的增长速度极快,随着数据库中数据量的急速膨胀,数据库的插入和查询效率越来越低.此时,除了程序代码和查询语句外,还得在数据库的结构上做点更改:在一个主读辅写的数据库中,当数据表数据超过10 ...

  4. OUTLOOK 发生错误0x8004010D

    问题:    outlook 2003 在接收邮件时报错: “正在接收”报告了错误(0x8004010D):“在包含您的数据文件的驱动器上,磁盘空间不足.请清空“已删除邮件”文件夹或删除某些文件以释放 ...

  5. Android_SQLite数据库增删改查操作

    一:什么是SQLite? 在Android平台上,集成了一个嵌入式关系型轻量级的数据库. 二:什么时候用的数据库? 有大量相似机构的数据需要存储时. 三:如何创建一个数据库? 1.创建一个Sqlite ...

  6. Your awesome titleHH

    Welcome to Jekyll! Your awesome titleHH About Blogging Like a Hacker Welcome to Jekyll! Jan 9, 2016 ...

  7. matlab size、numel、length、fix函数的使用,补充nargin

    size():获取矩阵的行数和列数 (1)s=size(A), 当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时矩阵的行数,第二个元素是矩阵的列数.(2)[r,c]=size(A), 当有 ...

  8. 解读ASP.NET 5 & MVC6系列(2):初识项目

    初识项目 打开VS2015,创建Web项目,选择ASP.NET Web Application,在弹出的窗口里选择ASP.NET 5 Website模板创建项目,图示如下: 我们可以看到,此时Web ...

  9. 剑指Offer面试题:8.斐波那契数列

    一.题目:斐波那契数列 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项.斐波那契数列的定义如下: 二.效率很低的解法 很多C/C++/C#/Java语言教科书在讲述递归函数的时 ...

  10. Why MVC is Better?(翻译)

    (本文翻译自CodeProject上的一篇关于ASP.NET MVC的文章,原文地址:http://www.codeproject.com/Articles/821275/Webforms-vs-MV ...