flex.sm、flex.md、fxFlex.lg 和 fxFlex.gt-lg 等之间有什么区别？

Question

我确实理解它所代表的术语：小、中、大和大于大。我已阅读https://github.com/angular/flex-layout/wiki/Responsive-API和https://getbootstrap.com/docs/4.3/utilities/flex/等。但我不明白 sm、md、lg 和 gt-lg 是如何一起工作的。

例如下面这段代码是什么意思？

<div fxFlex="100" fxFlex.sm="50" fxFlex.md="60" fxFlex.lg="70" fxFlex.gt-lg="80">

Answer 1

该行可以分解如下：

fxFlex="100" - default to 100% width 
fxFlex.sm="50" - on small screens, use 50% width
fxFlex.md="60" - on medium screens, use 60 % width
fxFlex.lg="70" - on Large screens, use 70% width
fxFlex.gt-lg="80" - on Anything greater than a large screen use 80% width