我没有利用Media Query使Angular 2应用程序响应。 我只是在使用javascript。 这是一个好习惯吗？

Question

I want my app to be fully responsive in any screen size. I am not utilizing Media Query and I am just using javascript to make my app responsive with Angular 2: [style.width], *ngIf="isEmpty" , etc.. Is this a good practice? Below is a sample of my working code. Thanks.

onResize(event: any) {
  this.getResponsive();
}   
getResponsive(){
  var modelQty = this.subCategories.length;
  var margin = 10;
  var fWidth = (screen.width-40) / 10 - margin;
  if(fWidth <= 110)
    fWidth = 110;

  this.frameWidth = fWidth;
  this.frameWidthStr = fWidth + 'px';  //[style.width]="frameWidthStr"
  this.frameHeight = fWidth + 20 + 'px'; 
  this.imageSize = fWidth *.75 + 'px';  //[style.height]="imageSize"

  var totalWidth = (fWidth + margin)*modelQty;
  var tMarginLeft =  (window.innerWidth - totalWidth)/2;

  if(tMarginLeft > 10){
    this.marginLeft = tMarginLeft + 'px';
    this.marginRight = '10px';
  } 
  else {
    this.marginLeft = 10 + 'px';    
    var tWidth = fWidth + 10+2;
    var delta = (window.innerWidth-15) % tWidth;
    let line = window.innerWidth/tWidth;
    line = line - delta / tWidth;
    this.marginRight = 10 + delta/line + 'px'; //[style.margin-right]="marginRight"
  }
}  

Answer 1

Rather than try and shoehorn angular into a custom responsive layout why not work with angular and use a compatible layout library to achieve your requirements.

This one is highly recommended

https://github.com/angular/flex-layout