页面布局自适应之@media screen

       在原有的项目基础上调整页面，要求：适配手机，ipad和电脑。本来打算用最笨的方法各给他们安排一个页面，但这样感觉有些冗余，向同事们请教，有为同事说可以通过request请求来判断设备，还有位说可以用@media screen来进行调整，不用通过action。于是果断搜索@media screen的用法，把另一种方式放在了一边，效果还可以，把我的部分主要代码分享下：    

/**屏幕宽度小于479px，适配手机*/
@media only screen and (max-width: 479px){
   .list-item {
      border-bottom: 1px solid #EFEFEF;
	  width: 100%;
	  height: auto;
	  line-height: auto;
	  padding: 9px;
	  background-color: #FFFFFF;
   }
}

/**屏幕宽度大于480px 适配pad*/
@media only screen and (min-width: 480px) and (max-width: 900px){
   .list-item {
      border-bottom: 1px solid #EFEFEF;
      padding: 1%; 
      cursor: pointer;
      width: 99%;
      height: auto;
      line-height: auto;
      padding: 9px;
      background-color: #FFFFFF;	
   }
}

/**屏幕宽度大于900x 适配电脑*/
@media only screen and (min-width: 901px){
   .list-item {
      border-bottom: