【HTML】通过不同的分辨率调用不同的css，两种方法：css本身判断、js调用css

通过百度发现很多的方法，不过每个方法用起来都不太好，css 直接判断的话，需要写很多，而如果，两套的话，书写起来就很方便，我个人采用了js这种方法，很有层次感。

下方这种方法是来自网络上http://www.divcss5.com/jiqiao/j662.shtml  （是这个内容，不过不是这个网站复制的。）


 

css：

<style>

.abc{ 

height:300px; 

border:1px solid #000; 

margin:0 auto;

} 

/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 

@media screen and (min-width: 1201px)
{ 

.abc {

width: 1200px

} 

} 

/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 

@media screen and (max-width: 1200px)
{ 

.abc {width: 900px} 

} 

/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ 

@media screen and (max-width: 900px)
{ 

.abc {width: 200px;} 

} 

/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

@media screen and (max-width: 500px)
{ 

.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的方法同样是网上的，不过我综合了好几种拼凑起来的，比其他人转载的，更有说服力。