頁面佈局自適應之@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: 1px solid #EFEFEF;
      padding: 1%; 
      cursor: pointer;
      width: 99%;
      height: auto;
      line-height: auto;
      padding: 9px;
      background-color: #FFFFFF;	
   }
}

       如程式碼所示，邊界值是可以自己限定的，然後頁面中的div可以讓它引用一個樣式，不同的情況下給予不同的樣式即可。話說，這幾天遇到好幾個問題都多虧了同事的提點，我的同事都是些可愛的小夥伴，謝謝你們~~~