Question

如何在样式表中使用我的[ngStyle]属性，并像在变量中使用它一样用于媒体查询？

目前我可以使用.html

中的ngStyle动态设置对象的大小和位置

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

然而，由于没有办法将此值插入媒体查询，例如变量...

使用来自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

根据窗口大小，我的图标大小（实际字体大小）也有类似的问题。

所以你可以获取窗口信息（我实际上是专门用于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>

Angular 2 ngStyle属性为较少样式表中的变量，用于媒体查询

1 个答案: