在Angular2+；中使用HTML插值来更改CSS样式是否不好；？

我的目标是当用户在桌面或移动设备上时更改CSS样式。因此，我首先使用了一个可观测值来返回窗口的宽度是否大于1000px

应用程序组件.ts

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Hitsuji';
  private screenSize = new BehaviorSubject<string>('small');
  cast$ = this.screenSize.asObservable();

 constructor( public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe(['(min-width: 1000px)'])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          this.changeScreenSizeBig();
        } else {
          this.changeScreenSizeSmall();
        }
      });
  }

  changeScreenSizeBig() {
    this.screenSize.next('big');
  }
  changeScreenSizeSmall() {
    this.screenSize.next('small');
  }
}

import { AppComponent } from './../app.component';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {

  picNum = 1;
  curScreenSize: string;
  constructor(public app: AppComponent) { }

  ngOnInit() {
    this.app.cast$.subscribe(screenSize => (this.curScreenSize = screenSize));
  }

  next() {
    if (this.picNum === 4) {
      this.picNum = 1;
    } else { this.picNum = this.picNum + 1; }
  }

}

projects.component.html

<img class="{{ curScreenSize }}" src="/src/assets/project{{ picNum }}.jpg" />

---

因此，我正在用

curscrensize

更改我的

img类

，我得到了一个基于两个不同名称的css样式

curscrensize

。这是否可以用一种更优雅的方式来完成呢？

正如评论部分所说，有，而且似乎更适合您的需要，因为您只关心屏幕大小。但是，如果要检查用户代理，则需要javascript来确保完成该工作，并检查您是否使用chromium、safari等

媒体查询 对于媒体查询方法，您只需声明

min-width

tier即可将桌面样式与移动样式分开（还有其他方法可以实现此目标，这只是为了回答问题而举的一个示例）。因此，您最终会遇到类似css的问题：

/* Mobile Style */
@media (max-width: 999px) {
  img {
    max-width: 1024px;
    width: 100%;
  }
}

/* Desktop Style */
@media (min-width: 1000px) {
  img {
    max-width: 1024px;
    width: 100%;
  }
}

以编程方式（javascript） 此外，如果您决定使用javascript方法，我建议只将body类更改为

mobile

或

desktop

，并根据父类更改样式。例如：

.desktop img {
  max-width: 1024px;
  width: 100%;
}

.mobile img {
  width: 100%;
}

---

因此，您不必担心跨多个组件的大量订阅，因此只需在body标记处更改一个类，并根据这些类对其他所有内容进行样式化。

正如在评论部分所述，有，而且似乎更适合您的需要，因为您只关心屏幕大小。但是，如果要检查用户代理，则需要javascript来确保完成该工作，并检查您是否使用chromium、safari等

媒体查询 对于媒体查询方法，您只需声明

min-width

tier即可将桌面样式与移动样式分开（还有其他方法可以实现此目标，这只是为了回答问题而举的一个示例）。因此，您最终会遇到类似css的问题：

/* Mobile Style */
@media (max-width: 999px) {
  img {
    max-width: 1024px;
    width: 100%;
  }
}

/* Desktop Style */
@media (min-width: 1000px) {
  img {
    max-width: 1024px;
    width: 100%;
  }
}

以编程方式（javascript） 此外，如果您决定使用javascript方法，我建议只将body类更改为

mobile

或

desktop

，并根据父类更改样式。例如：

.desktop img {
  max-width: 1024px;
  width: 100%;
}

.mobile img {
  width: 100%;
}

---

这样，您就不必担心跨多个组件的大量订阅，因此只需在body标记处更改一个类，并根据这些类对其他所有内容进行样式化。

有时您需要执行以下操作：，但是在这种情况下，为什么不只是使用媒体查询呢？我认为有些情况下你可以按照你所描述的方式使用css，但是媒体查询就是为了这个目的而设计的。我会研究使用媒体查询，谢谢@IngoBürk和Deanmedia queries是你所做的正确选择，但有时你会需要这样的东西。。。在这种情况下，您可能希望研究构建自定义指令以隔离责任，而不是将此逻辑连接到临时基础上的每个组件。有时您需要做一些事情，好的，但在这种情况下，为什么不使用媒体查询呢？我想有些情况下，您可以按照您描述的方式使用css，但是媒体查询就是为了这个目的而设计的。我会研究如何使用媒体查询，谢谢@IngoBürk和Deanmedia查询是你想要做的事情的正确选择，但有时你会需要这样的东西。。。在这种情况下，您可能希望研究构建自定义指令以隔离责任，而不是将此逻辑临时连接到每个组件中