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