IE兼容问题一直是入门的前端开发者最无可奈何的地方（只会兼容IE的除外）。而我也是上班了几个月才能真正的还是深入研究这个问题，不过倒也没有遇到太多的麻烦，其实个人认为要想网页的SEO优化好，面向访问者范围大，还是使用电脑手机分端比较好，响应式说得好听点，一个页面加载不同设备的界面，说不好听的，每个分辨率都无法做太复杂的设计，要兼顾的东西太多，代码最终会变得异常庞大。
我这篇文章主要讲的是布局兼容问题，不提什么圆角啊，半透明啊，内外边距之类的。
思路一，分辨率大于1200px不使用@media申明
一般来说都会这样写：
@media all and (min-width: 1201px) {
div{width:500px;}
}
@media all and (max-width: 1200px) {
div{width:100%;}
}
但是如果要IE直接识别你在分辨率大于1200px的情况，可以直接这样写：
div{width:500px;}
@media all and (max-width: 1200px) {
div{width:100%;}
}
我已经十分精简的了，其实就相当于，当你定义了除分辨率大于1200px之外的所有情况，那么大于1200px分辨率的@media申明就可以直接不写了，而IE浏览器的老版本正好都不支持@media申明，也就是说他会正常的解析大于1200px的情况。相对的，谷歌等一般浏览器都会识别@media申明，也就是说IE浏览器会变为非响应式，直接是PC布局，而其它浏览器的响应式不受影响。
这种做法的好处是代码量少，加载快，缺点是IE会因为不识别@media而不会响应式，只会变为pc布局。
思路二，不同浏览器加载不同css
这个思路简化一下，就是IE访问则额外加载一个css来保持兼容，代码大概是这样：
<!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css"/> <![endif]-->
数字8随意改就好，代表不同的IE版本，可以直接添加多条，ie8.css里面就负责写在IE下错位后帮助回归正常的css样式。
这种做法的好处是变化灵活，局限性小，缺点是IE依旧不会是响应式，而且代码量很大。
思路三，js实现对屏幕分辨率的判断
这是一种很复杂，但是对于响应式而言最优的解决办法，但因为十分耗资源我不怎么推荐，因为IE下做响应式没有半点卵用，它又没手机版，所以以下代码就是演示js不同分辨率加载不同css，浏览器一般都会识别js，而不会出现类似@media申明的情况。
<link href="" rel="stylesheet" type="text/css" id="css" /> //id等于css的空路径样式
<script type="text/javascript">
window.onload=function(){
var w=window.screen.width;//获取屏幕分辨率大小
var c;
if(1200>w>=1000){ //分辨率小于1200大于等于1000
c="c2.css";
} else if(999>w>=768){ //分辨率小于999大于等于768
c="c1.css";
} else if(767>w){ //分辨率小于767
c="c0.css";
}
document.getElementById("css").href=c; //将文件路径写入到css样式引入标签
}
</script>
这种做法的好处就是IE在不同分辨率下也可以变为不同的布局，基本和响应式差不多，缺点很明显，首先是太麻烦，其次不能实时响应，每次都需要刷新。
其实我觉得思路三并没有什么卵用，但值得记录。
