Question

我的目标是在用户使用台式机或移动设备时更改CSS样式。因此，如果窗口的宽度大于1000px，我首先使用observable返回。

app.component.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');
  }
}

然后我订阅了可观察的cast $并将其与HTML结合使用以更改CSS样式。

projects.component.ts

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

因此，我将img class更改为curScreenSize，并且根据两种可能的curScreenSize名称获得了CSS样式。可以用更优雅的方式做到这一点吗？

Answer 1

正如评论部分所述，有css media queries，似乎更符合您的需求，因为您只关心屏幕的大小。但是，如果要检查用户代理，则需要使用javascript才能确保完成此工作，并检查您是否使用铬，野生动物园等。

媒体查询

对于媒体查询方法，您只需要声明api层即可将桌面样式与移动样式分开（还有其他方法可以实现该目标，这只是示例，仅供参考））。因此，您最终会得到类似CSS波纹管的东西：

min-width

以编程方式（javascript）

此外，如果您决定使用javascript方法，我建议仅将主体类更改为/* Mobile Style */ @media (max-width: 999px) { img { max-width: 1024px; width: 100%; } } /* Desktop Style */ @media (min-width: 1000px) { img { max-width: 1024px; width: 100%; } }或mobile并根据该父类更改样式。例如：

desktop

因此您不必担心许多组件上的许多预订，因此只需在body标签上更改一个类，然后根据这些类对其他所有样式进行样式设置。

使用HTML插值来更改Angular2 +中的CSS样式是否不明智？

1 个答案:

媒体查询

以编程方式（javascript）