[html]给网页同一div针对不同客户端引入不同css文件实现自适应

最近网站更新了wordpress会员中心，想必各位都发现了，最近两天在做适配，这回终于解决了[html]给网页同一div针对不同客户端引入不同css文件实现自适应这个问题，记录一下这个步骤发布这个教程！即[html]给网页同一div针对不同客户端引入不同css文件实现自适应的解决方法。

效果图如下：

首先想到了两种方法：

一、php、asp、js判断客户端输出对应的样式

function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
//电脑端
//加载css
var linkNode = document.createElement("link");
linkNode.setAttribute("rel","stylesheet");
linkNode.setAttribute("type","text/css");
linkNode.setAttribute("href","../../css/index.min.css");
document.head.appendChild(linkNode);
//加载js
var scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", "../../js/index.min.js");
document.head.appendChild(scriptNode);
}else{
//手机端
//加载css
var oMeta = document.createElement('meta');
oMeta.name = 'viewport';
oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';
document.getElementsByTagName('head')[0].appendChild(oMeta);
var linkNode = document.createElement("link");
linkNode.setAttribute("rel","stylesheet");
linkNode.setAttribute("type","text/css");
linkNode.setAttribute("href","../../css/phone.min.css");
document.head.appendChild(linkNode);
//加载js
var scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", "../../js/phone.min.js");
document.head.appendChild(scriptNode);
}
}

browserRedirect();//调用判断当前访问页面是手机端还是移动端

经过测试发现与网站现有js冲突，既然不行换第二种

二、css媒体查询法

@media only screen and (min-width: 1029px) {.charge{//这里写pc客户端的样式
width: 1170px;
height: 150px;
border-radius:10px 10px 0 0;
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left,#0674ec 0%,#7347c1 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to right,#0674ec 0%,#7347c1 100%) repeat scroll 0 0;
}
}
@media only screen and (min-width: 321px) and (max-width: 1024px){.charge{//这里写宽度大于321px小于1024px的样式(一般是平板电脑)
width: 1170px;
height: 150px;
border-radius:10px 10px 0 0;
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left,#0674ec 0%,#7347c1 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to right,#0674ec 0%,#7347c1 100%) repeat scroll 0 0;
}
}
@media screen and (min-width: 320px) and (max-width: 480px) {.charge{//在这里写小屏幕设备的样式
width: 100%;
height: 150px;
border-radius:10px 10px 0 0;
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left,#0674ec 0%,#7347c1 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to right,#0674ec 0%,#7347c1 100%) repeat scroll 0 0;
}
}