有关简单的响应式效果

最近做个项目,要求根据窗口的大小展示出宽窄屏.
我搜了响应式的相关案例.目前国内电商类网站只有天猫做到部分效果,但兼容及响应速度仍存在着问题.还只是PC端.
不过人家的效果完全就可以满足我的需求了.分析了1天他们网站源码.找不到解决方案.
还望各位大佬指点.
问题1:用@media方法如何满足所有浏览器的兼容性.(请提供相关实例链接)
问题2:由于时间紧,又没有解决方案根据自己的能力写了段实现效果的代码.
我知道这个肯定不行的...
<link href="" id="link1" rel="stylesheet"/>//这个.css文件里面放的全是窄屏的样式.也就是分辨率小于等于1100的时候重置这些样式.
<script type="text/javascript">
window.onload=function(){
var link=document.getElementById('link1');
if(screen.width<=1100)
{link.href="index2.css"}
else{
link.href="";
}
}
</script>