Angular 2 ngStyle屬性作爲較少樣式表中的變量用於媒體查詢

如何在我的樣式表中使用我的[ngStyle]屬性並使用像變量一樣用於媒體查詢？Angular 2 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; 
}

因此，對於沒有媒體查詢的所有設備尺寸的邊距是固定的，因此變得無用。

來源

2017-03-28 user2182570

我只是基於窗口大小的圖標尺寸（實際字體大小）類似的問題。

所以，你可以抓住窗口信息（其實我奉獻了WindowService，但對於這個答案的目的，我們可以通過跳過保持短）

我也在你的情況下創造了一個局部變量，fontSize的（雖然這將是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; 
     } 
    }

然後在HTML中，您可以直接分配到屬性（在你的情況應該是[style.margin-top.px]="marginTop"。

<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>

來源

2018-01-27 15:41:52 Iancovici

Angular 2 ngStyle屬性作爲較少樣式表中的變量用於媒體查詢

回答

相關問題