html - flex.sm vs flex.md vs 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