CSS3自适配手机屏幕

       @media only screen and (max-width:350px){
          .img{  
             width: 80px;
             height:70px;
             background-image: url(./images/heart2.png);
             background-size: 100% 100%;
             float: left;
             margin-top: 5%;
             margin-left: 5%;
             font-size: 10px;      
        } 
      }
       @media only screen and (min-width:350px){
      .img{  
             width: 100px;
             height: 85px;
             background-image: url(./images/heart2.png);
             background-size: 100% 100%;
             float: left;
             margin-top: 8%;
             margin-left: 5%;
             font-size: 10px;      
        }
      }

根据屏幕大小(长宽)来调整css样式,达到手机屏幕适配的效果。

posted @ 2016-04-23 09:57  骏码信息  阅读(503)  评论(0编辑  收藏  举报