有时候你需要把同一个页面在手机和pc同时打开，其中有一个办法就是判断不同分辨路加载不同的css
小编总结了几种分别加载css的方法：
1.比较复杂的使用js判断加载不同css （亲测可用）
但是这种方法只有最开始的时候会判断，如果你拖动浏览器大小是不会发生改变的（当然如果喜欢拖着玩的话）
1 <link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/> 2 ????????<script type="text/javascript"> 3 ????????????window.onload=function(){ ?4 ????????????????var sc=document.getElementById("links"); ?5 ????????????????????if(window.screen.width>1024) //获取屏幕的的宽度 ?6 ????????????????????{ ?7 ????????????????????????sc.setAttribute("href","../css/pc_wuqinglan.css"); //电脑 8 ????????????????????} ?9 ????????????????????else{ 10 ????????????????????????sc.setAttribute("href","../css/m_wuqinglan.css"); //手机11 ????????????????????} 12 ????????????}13 ????????</script>2.比较简单帅气的用媒体查询加载对应css
会随着你的拖动窗口大小而执行
//其中 media 是媒体查询的范围，当最大宽度是1200，这里就是手机平板一下的尺寸 加载手机css ，反之电脑css
<link rel="stylesheet" type="text/css" href="../css/m_wuqinglan.css" media="screen and (max-width:1200px)"/><link rel="stylesheet" type="text/css" href="../css/pc_wuqinglan.css" media="screen and (min-width:1201px)"/>
3.当然还有最刺激的方式，那就是直接媒体查询然后写样式
1 @media only screen and (max-width: 1024px) { 2 ????.div1{ 3 ????????width:50%; 4 ????} 6 ????.div2{ 7 ????????width:50%; 8 ????}10 ????.div3 {11 ????????width:50%;12 ????}13 }14 15 @media only screen and (min-width: 1024px) {16 ????.div1{17 ????????width:100%;18 ????}20 ????.div2{21 ????????width:100%;22 ????}24 ????.div3 {25 ????????width:100%;26 ????}27 }当然要做ie兼容的宝贝们，媒体查询是不支持ie9以下的（暂时是这样），当然可以依靠第三方的兼容方式
CSS响应式：根据分辨路加载不同CSS的几个方法，亲测可用
原文地址：http://www.cnblogs.com/mibear/p/8033115.html