一、根据屏幕分辨率大小加载不同CSS.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注：这里写一个带ID="css" 的空的link样式-->
<script>
var w=window.screen.width//先获取屏幕分辨率大小
var c
if(w==1280){
c="a.css"
}else if(w==1024){
c="d.css"
}else if(w==800){
c="c.css"
}else{
c="d.css"
}
document.getElementById("css").href=c
</script>
</head>
<body>正文</body>
</html>
二、根据浏览器窗口大小加载不同CSS
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注：这里写一个带ID="css" 的空的link样式-->
<script>
var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth//先获取窗口宽度
var c
if(w>=1280){
c="a.css"
}else if(w>=1024){
c="d.css"
}else if(w>=800){
c="c.css"
}else{
c="d.css"
}
document.getElementById("css").href=c
</script>
</head>
<body>正文</body>
</html>
css具有媒体响应功能，可以判断屏幕宽度，从而加载设置的css
如下代码，当宽度小于1000px的时候加载css下的css-mobile.css
<link href="css/css-mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 1000px)">如下代码，当宽度大于1000px的时候加载css下的css-pc.css
<link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例：
<link rel="stylesheet" type="text/css" href="./css/style.css" media="all"><link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)">
<link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">
只有一个css文件情况下，根据分辨率调整css样式，示例：
@media screen and (max-width:620px){.logo{width: 300pxmargin-left: -140px}
}
@media screen and (max-width:1024px) and (min-width:621px) {
.logo{width: 220pxmargin-left: -99px}
.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%}
.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%}
}
