最近做了一段时间的网站，对于不同浏览器的访问和屏幕的大小是一个必须要考虑的问题，下面有几个简单的方式，对于时间紧迫而且对页面没有太大动画要求的css可以采用。。。其实最开始对于做网站就应该想到一些响应式布局的实现，比如说如果刚开始在1366*768采用table标签来做网页的时候，可能到手机上缩小了分辨率，则会把table标签压的特别小；但是如果我们在刚开始用div来做表格的话可能效果会好一点，可以借用媒体查询把div网屏幕下方放，这种方式在bootstrap里面类似。
下面有几个小方法与大家分享一下（当你最后才发现其他浏览器或者手机上难看时）
1.针对与其他浏览器（大多数是IE6,7,8）重新写一个css样式表：
当写好样式表以后，利用js切换到该css，先检测浏览器为IE6,7,8时（在对应的link标签上加上ID属性）：
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("6.")>=1){
alert("您使用的IE浏览器版本太低，建议用IE9以上版本浏览本网站！")
$("#page_css").attr("href", "/static/css/page_IE.css");
}
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("7.")>=1){
alert("您使用的IE浏览器版本太低，建议用IE9以上版本浏览本网站！")
$("#page_css").attr("href", "/static/css/page_IE.css");
}
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("8.")>=1){
alert("您使用的IE浏览器版本太低，建议用IE9以上版本浏览本网站！")
$("#page_css").attr("href", "/static/css/page_IE.css");
}
这样当js检测到当前浏览器为IE6,7,8时会把原来的css换掉。
2.如果用手机或者平板以及其他的非电脑访问网站时，可以借用js查询媒介的屏幕宽度，或者借用媒体查询写不同的css：
js检测代码：
<script>
if(screen.width <= 980){
alert("如果使用手机或平板浏览本网站会错过更多信息；详情请见电脑版！");
//或者利用上面的方式更换css或者js文件
}
</script>
或者使用css直接检测：
<link rel="stylesheet" type="text/css" media="screen and (max-400px) and (max-device-600px)" href="xxx.css">
响应式布局ss代码：
@media screen and (min-200px) and (max-480px) {
/*........写针对与手机的css*/
}
@media screen and (min-480px) and (max-980px) {
/*........写针对与平板的css*/
}
@media screen and (min-1700px) {
/*........写针对与大屏幕显示器的css*/
}
以上两种方式，可以解决一些简单问题，如果要了解更复杂的兼容，适配问题，还得慢慢积累。。。