S9:行動裝置下版面調整

// and (max-width: 1023px)
@media screen and (max-width:1023px){
  label{
    padding-left: 50px;
    display: block; margin: 10px; 
  }

  .simple,.simple.small{      
    .mvlist{
      width: 48%; padding: 1%; margin: 1%;
    }
  }
  .detail{
      .mvlist{
        flex-direction: row;
        flex-wrap: wrap;
        .mvImg{ flex: 1 ;}
        .mvItem{ flex: 3;}
        .mvDesc{ flex: 3 100%;}      
      }
    }
    .simple.small{    
      .mvlist{  
        width: 31.33%; padding: .5%; margin: 1%;
      }
    }
  }

// and (max-width: 768px)
@media screen and (max-width:767px){

  .simple,.simple.small{      
    .mvlist{      
      width: 90%; padding: 1%; margin: 5%;
    }
  }
  .simple.small{    
    .mvlist{  
      width: 48%; padding: 1%; margin: 1%;
    }
  }
  .detail{
    .mvlist{
      .mvDesc{ display: none;}      
    }
  }
}

 

 

Vue是通過組件與數據綁定來進行渲染的,jquery則主要是用來做簡單的單擊處理和強大的操縱DOM的能力