通过百度发现很多的方法,不过每个方法用起来都不太好,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的方法同样是网上的,不过我综合了好几种拼凑起来的,比其他人转载的,更有说服力。