通过百度发现很多的方法，不过每个方法用起来都不太好，css 直接判断的话，需要写很多，而如果，两套的话，书写起来就很方便，我个人采用了js这种方法，很有层次感。
下方这种方法是来自网络上http://www.divcss5.com/jiqiao/j662.shtml （是这个内容，不过不是这个网站复制的。）
css：
<style>
.abc{
height:300px;
border:1px solid #000;
margin:0 auto;
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
{
.abc {
width: 1200px
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
.abc {width: 900px}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
.abc {width: 200px;}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
.abc {width: 100px;}
</style>
js：
<script type="text/javascript">
var scwidth = screen.width;
if(scwidth <= 800){
//应该是800*600的分辨率
document.write("小屏幕，特殊照顾");
}else if(scwidth<=1024){
//应该是1024*768
document.write("正常情况");
document.write('<link href="/common/css/style-1024-768.css" rel="stylesheet" type="text/css">');
}else if(scwidth>=1366){
//大于1440的应该都是宽屏吧
document.write("哇塞，宽屏啊！");
document.write('<link href="/common/css/style-1366-768.css" rel="stylesheet" type="text/css">');
}
</script>
js的方法同样是网上的，不过我综合了好几种拼凑起来的，比其他人转载的，更有说服力。