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

标签： htmlcssangularflexbox

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