Angular Flex-Layout，根据屏幕分辨率的条件样式/类

Question

根据这篇帖子https://www.angularjswiki.com/flexlayout/basics/ 在 Angular Flex 布局中的可用断点列表

项中

断点是： |断点 |断点含义 |媒体查询 | | -------- | - | -------------- | | xs |超小| '屏幕和（最大宽度：599px）' | | sm |中小| '屏幕和（最小宽度：600px）和（最大宽度：959px）' | | md |中 | '屏幕和（最小宽度：960px）和（最大宽度：1279px）' | | lg |大| '屏幕和（最小宽度：1280px）和（最大宽度：1919px）' | | xl |超大| '屏幕和（最小宽度：1920px）和（最大宽度：5000px）' | | lt-sm |小于中小| '屏幕和（最大宽度：599px）' | | lt-md |低于中等 | '屏幕和（最大宽度：959px）' | | lt-lg |小于大| '屏幕和（最大宽度：1279px）' | | lt-xl |小于特大号 | '屏幕和（最大宽度：1919px）' | | gt-xs |大于特大 | '屏幕和（最小宽度：600px）' | | gt-sm |大于中小| '屏幕和（最小宽度：960px）' | | gt-md |大于中 | '屏幕和（最小宽度：1280px）' | | gt-lg |大于大 | '屏幕和（最小宽度：1920px）' |

FlexLayout 是否可以根据分辨率应用一些样式或 CSS 类？

注意：抱歉之前的文本 stackoverflow 存在 MD 表错误，在编辑模式下可以正常工作！

Answer 1

是的，你可以使用断点

ngClass:

<div ngClass.gt-lg="text-large"></div>

ngStyle:

<div ngStyle.gt-lg="background: red"></div>

---

或者，根据您的用例，您可以

在你的 scss 中设置 fxFlex 断点：

// variables.scss or styles.scss
$xs: 'screen and (max-width: 599px)';
$sm: 'screen and (min-width: 600px) and (max-width: 959px)';
$md: 'screen and (min-width: 960px) and (max-width: 1279px)';
$lg: 'screen and (min-width: 1280px) and (max-width: 1919px)';
$xl: 'screen and (min-width: 1920px) and (max-width: 5000px)';
$lt-sm: 'screen and (max-width: 599px)';
$lt-md: 'screen and (max-width: 959px)';
$lt-lg: 'screen and (max-width: 1279px)';
$lt-xl: 'screen and (max-width: 1919px)';
$gt-xs: 'screen and (min-width: 600px)';
$gt-sm: 'screen and (min-width: 960px)';
$gt-md: 'screen and (min-width: 1280px)';
$gt-lg: 'screen and (min-width: 1920px)';

并像这样使用它们：

// styles.scss or my.component.scss
@import 'variables.scss';
@media #{$gt-md} {
  .asdf {
    color: blue;
  }
}

<!-- my.component.html -->
<div class="asdf"></div>