手機顯示.png

手機顯示.png

pad顯示.png

電腦顯示.png

核心代碼,當然是媒體查詢了,
css代碼

@media screen and (max-width: 481px) { // 手機端的判定
  .container{
    .main-area{
      .item {
        width: 100% !important;
        min-width: 100px !important;
        margin: auto !important;
      }
    }
  }  
   .sidebar {
    z-index: 999;
    left: -249px;
  }
  .container .menu {
    display: block ;
  }
  .container .main{
    margin-left: 0;
  }
}

@media screen and (min-width: 481px) {
  .container .sidebar  {
    left: 0;
  }
}
@media screen and (min-width: 482px) and (max-width: 789px) {  // 平板
  .main .main-area .item {
    width: 90%;
  }

}
@media screen and (min-width: 790px) and (max-width: 1039px) {   // 平板
  .main .main-area .item  {
    width: 43%;
  }
}
@media screen and (min-width: 1040px) and (max-width: 1920px) { // pc
  .main .main-area .item {
    width: 20%;
  }
}

js代碼

// 點擊按鈕事件
      oMenu.onclick = function() {
          if (oLeftBar.offsetLeft == 0) {
              oLeftBar.style.left = -249 + 'px';
          }
          else {
              oLeftBar.style.left = 0;
          }
      }


      // 監(jiān)聽頁面寬度變化
      window.onresize = function() { // 實現(xiàn)響應(yīng)式的關(guān)鍵代碼
          judgeWidth();
      };

      // 判斷頁面寬度
      function judgeWidth() {
          if (document.documentElement.clientWidth > 481) {
              oLeftBar.style.left = 0;
          } else {
              oLeftBar.style.left = -249 + 'px';
          }
      }
// 返回頂部按鈕的代碼
      $(window).scroll(function() { // 隱藏顯示按鈕
          if($(window).scrollTop() >= 200){
              $('#fixedBar').fadeIn(300);
          }else{
              $('#fixedBar').fadeOut(300);
          }
      });
      $('#fixedBar').click(function() {
          $('html,body').animate({scrollTop:'0px'},800);
      })