导入不用的css文件及在不同设备显示不用的html页面

当一个页面对应有多个css样式文件时,我们可以根据地址栏的参数值而导入不同的css文件:

function getCss() {
    var linkNode = document.createElement("link");
    linkNode.setAttribute("rel","stylesheet");
    linkNode.setAttribute("type","text/css");  

    if(GetQueryString(‘from‘)==‘lk‘){
        linkNode.setAttribute("href","css/prod_details_lk.css");
        console.log(111);
    }else{   //默认导入推客的css
        linkNode.setAttribute("href","css/prod_details_tk.css");
    }
    document.head.appendChild(linkNode);
};

function GetQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
getCss();

下面是来自I‘m QQ官网的js代码(https://im.qq.com/index.shtml),它随着浏览器设备的不同而打开对应的页面,从而实现响应式。

     if(window.location.protocol==="http:"){
            window.location.replace(‘https://im.qq.com/index.shtml‘);
        }
        var t0 = new Date();
        var os = function() {
            var ua = navigator.userAgent,
                    isWindowsPhone = /(?:Windows Phone)/.test(ua),
                    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
                    isAndroid = /(?:Android)/.test(ua),
                    isFireFox = /(?:Firefox)/.test(ua),
                    isChrome = /(?:Chrome|CriOS)/.test(ua),
                    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
                    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
                    isPc = !isPhone && !isAndroid && !isSymbian;
            return {
                isTablet: isTablet,
                isPhone: isPhone,
                isAndroid : isAndroid,
                isPc : isPc
            };
        }();
        var getSearch = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substring(1).match(reg);
            if ( !! r) {
                return unescape(r[2]);
            }
            return null;
        };
        var searchstr = window.location.search,
                hashstr = window.location.hash;
        var viewpc = getSearch("vpc");
        if(!viewpc && (os.isAndroid || os.isPhone)){
            location.replace(‘http://im.qq.com/immobile/index.html‘+searchstr+hashstr);
        }else if(os.isTablet){
            location.replace(‘http://im.qq.com/qqhd/‘+searchstr+hashstr);
        }
时间: 2024-07-29 17:29:48

导入不用的css文件及在不同设备显示不用的html页面的相关文章

html 导入css 文件和js文件

切记!!!!!!!导入css文件正确格式 ,这是写给自己的.代码规范,一个标点可能影响大局,步步为营...细节决定成败...j 今天由由于在css文件导入的时候<link >写成了<link/> 但css样式有效,但是js完全无效.然后可以说一天碌碌无为,现在瞌睡的要死,还是得继续工作,记住!!细节决定成败!!!! 不要再一定正确的方法上修改,也永远不要在编程上使用试错法,不要失去对程序的信仰,问题一定在自己...

&lt;link&gt;和@import url()引入外部css文件的区别

<link>和@import url()引入外部css文件的区别:标题中的两种方式都可以引入外部css文件,关于它们的基本用法这里就不多介绍了,具体可以参阅相关阅读.相关阅读:(1).<link>标签可以参阅HTML的<link>标签一章节.(2)[email protected] url()可以参阅css的@import url用法简单介绍一章节.下面介绍一下这两者的比较明显的区别.(1).加载机制不同,link方式是首先加载完css文件,然后再加载页面,而@impo

如何在CSS文件里加入变量

[摘自http://blog.itpub.net/285892/viewspace-573357] 前言 这个技巧说来很简单.我们让Apache把任何stylesheet重定向到一个指定的PHP脚本.该脚本会一行行读取stylesheet的内容,找到并替换任何用户自定义的变量,最终会重新生成一个CSS样式表.浏览器不会发觉到有什么地方不同.在后面,我们会讨论如何缓存生成的最终结果避免加大CPU的负载. 请注意,这个教程需要读者懂得一些基本的PHP(OOP).Apache和HTTP知识. Norm

写一个Sublime Text 2插件(CSS文件里px单位替换成rem单位)

三年前我就知道了sublime text 不过那时候用DW还是很爽的样子,后来有天想为难自己了,于是用了两年的vim和五笔,最近又觉得这么好编辑器也可以试试,改变一下自己,用一下的,不过由于工作的原因,没有坚持下来,有时候顺手似乎比先进更重要一些. 最近工作都是做一些移动端的页面,而微信的长按出现二维码有个bug,在ios里缩放的页面长按是不会出现"识别二维码"的.所以需要转换一下,不要让页面缩放,要自适应,这个时候就用rem单位来做的会比较好一些,而我的同事之前开发了一个px to

Spring Mvc + Maven + yuicompressor 使用 profile 来压缩 javascript ,css 文件; (十)

profile相关知识点: 在开发项目时,设想有以下场景: 你的Maven项目存放在一个远程代码库中(比如github),该项目需要访问数据库,你有两台电脑,一台是Linux,一台是Mac OS X,你希望在两台电脑上都能做项目开发.但是,安装Linux的电脑上安装的是MySQL数据库,而Mac OS X的电脑安装的是PostgreSQL数据库.此时你需要找到一种简单的方法在两种数据库连接中进行切换,你会怎么做? 此外,你的项目需要部署.为了调试,在开发时我们在Java编译结果中加入了调试信息(

css文件加载:@import和link的区别

刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使用方法: <style type="text/css"> <!-- @import url("css/main.css"); @import url("css/base.css"); --> </style> li

CSS_添加CSS文件方法,盒模型和定位

学习笔记整理,非原创. 添加css的方法 链接外部样式表 <link rel=stylesheet type=text/css href=style.css> Rel表示在页面中使用外部的样式表.type指文件的类型是样式表文件,href指文件的位置. 内部样式表 <style type=”text/css”> <!— //定义style --> </style> 导入外部 样式表 <style type=”text/css”> <!— @

【翻译】Microsoft Ajax Minifier 快速使用指南(与VS集成使用) 编译后直接压缩项目的JS或CSS文件

网上找了好久终于找到一个能跟VS集成使用的JS和CSS压缩工具,因为害怕忘记,所以给转发过来,顺便翻译一下,大学那会儿学的英语基本上都已经还给老师了,所以翻译的不太好,不过能看懂就成,对吧? 原文地址:http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx 一.在命令行中使用 在下载安装完成Microsoft Ajax Minifier之后,你就可以以命令的方式使用它了.单击“开始”——“所有程序”——“Microsoft Ajax Minif

开源作品-PHP写的JS和CSS文件压缩利器-SuMinify_PHP_1_5

前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件.外部资源文件有一些是第三方插件,有一些是自己写的业务功能脚本,项目引用这些外部文件,需要把没有压缩过的第三方插件压缩后再引用,而自己的业务功能脚本,有的做成插件形式,引用一个功能脚本,需要同时引用若干个脚本文件,因此需要把这些脚本文件合并成一个压缩文件再引用,这样可以减少HTTP请求次数,减少这些外