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

通过百度发现很多的方法,不过每个方法用起来都不太好,css 直接判断的话,需要写很多,而如果,两套的话,书写起来就很方便,我个人采用了js这种方法,很有层次感。
下方这种方法是来自网络上http://www.divcss5.com/jiqiao/j662.shtml  (是这个内容,不过不是这个网站复制的。)
【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css 
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>
【HTML】通过不同的分辨率调用不同的css,两种方法:css本身判断、js调用css 
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的方法同样是网上的,不过我综合了好几种拼凑起来的,比其他人转载的,更有说服力。
上一篇:【ECS】ECS安全组实践——玩转安全组


下一篇:【ECS】ECS安全组实践——区分安全组