2つのngStyleプロパティを変数として使用し、メディアクエリで使用するスタイルシートが少ない

Question

スタイルシートで[ngStyle]プロパティを利用し、メディアクエリで使用する変数を使用するにはどうすればよいですか？メディアクエリーには、この値をプラグインの方法がないよう

現在、私は動的に.htmlを

[ngStyle]="{'margin-top': (theme.displayNameMarginTop | convertpx), 
         'margin-left': (theme.displayNameMarginLeft | convertpx) }" 

でngStyleを使用してオブジェクトの位置がしかし、これは応答設計のために分解し、サイズを設定することができます、変数...変数を使用

... variabless.lessファイルから

@media all and (max-width: 1920px) and (min-width: 1280px) { 

    .displayname-container { 
     margin-top: @displayname-margintop !important; 

    } 
} 

のように、関連するプロパティを使用する必要があります...

@media all and (max-width: 1920px) and (min-width: 1280px) { 

.displayname-container { 
    margin-top: theme.displayNameMarginTop !important; 
} 

結果として、メディアクエリなしですべてのデバイスサイズに対してマージンが固定され、使用には無意味になります。

Answer 1

私はちょうどウィンドウサイズに基づいてアイコンサイズ（実際にはフォントサイズ）に関して同様の問題がありました。

私はまた、あなたのケースでは、ローカル変数、のfontSize（ただしを作成したので、あなたは、ウィンドウの情報をつかむことができた（私は実際にWindowServiceを捧げますが、この回答の目的のために、我々はスキップして、短い、それを維持することができます）

それはあなたの場合には、それは[style.margin-top.px]="marginTop"する必要があります（そして、あなたのHTML内で、あなたはプロパティに直接割り当てることができますmarginTop）

fontSize: number; 

    constructor() { 
    this.initResponsiveElements(); 
    } 

    initResponsiveElements() { 
     const width = window.screen.width; // I actually encapsulated this with service 
     if(width< 544){ 
      this.fontSize = 20; 
     }else if(width > 544 && width < 768) { 
      this.fontSize = 30; 
     }else if(width >=768 && width < 992) { 
      this.fontSize = 40; 
     }else if(width >= 992 && width <1200){ 
      this.fontSize = 45; 
     }else{ 
      this.fontSize = 50; 
     } 
    } 

だろう。

<span class="fa fa-bookmark bookmark-icon-test" 
       [style.font-size.px]="fontSize"></span> 

さらにウィンドウのサイズ変更に応答する必要がある場合は、ウィンドウのサイズ変更機能を呼び出すことができます

<span class="fa fa-bookmark bookmark-icon-test" 
       (window:resize)="initResponsiveElements()" 
       [style.font-size.px]="fontSize"></span>