码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-07-10 12:56:01      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:

  //注意屏幕宽度从大到小
    .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宽度 */ 
   
    //注:来源于网络
        

    

 

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

标签:

原文地址:http://www.cnblogs.com/yuanyue/p/4635350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!