根据屏幕宽度适应屏幕样式

  //注意屏幕宽度从大到小
    .abc{ height:300px; border:1px solid #000; margin:0 auto} 
    @media screen and (min-width: 1201px) { 
    .abc {width: 1200px}  
    } 
    /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
     
    @media screen and (max-width: 1200px) { 
    .abc {width: 900px}  
    } 
    /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
     
    @media screen and (max-width: 901px) { 
    .abc {width: 200px;}  
    } 
    /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 
     
    @media screen and (max-width: 500px) { 
    .abc {width: 100px;}  
    } 
    /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
   
    //注：来源于网络
        

    

 

转载于:https://www.cnblogs.com/NigelShi/p/4635350.html