flex-layout的响应式布局依照material设计规范来制定
详情见 官方文档
断点
为了获得最佳用户体验，material用户界面应适应以下断点宽度的布局：
480,600,840,960,1280,1440和1600dp。
Breakpoint (dp) |
Handset / Tablet Portrait |
Handset / Tablet Landscape |
Window |
Columns |
Gutter |
0 |
small handset |
xsmall |
4 |
16 |
|
360 |
medium handset |
xsmall |
4 |
16 |
|
400 |
large handset |
xsmall |
4 |
16 |
|
480 |
large handset |
small handset |
xsmall |
4 |
16 |
600 |
small tablet |
medium handset |
small |
8 |
16/24* |
720 |
large tablet |
large handset |
small |
8 |
16/24* |
840 |
large tablet |
large handset |
small |
12 |
16/24* |
960 |
small tablet |
small |
12 |
24 |
|
1024** |
large tablet |
medium |
12 |
24 |
|
1280** |
large tablet |
medium |
12 |
24 |
|
1440** |
large |
12 |
24 |
||
1600** |
large |
12 |
24 |
||
1920** |
xlarge |
12 |
24 |
| breakpoint | mediaQuery |
|---|---|
| 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)’ |
如果我们将断点别名与静态Flex-Layout API结合使用，我们可以使用简单的标记约定轻松地支持响应断点：
该别名用作静态API HTML标记的后缀扩展名！
<api>.<breakpoint alias>="<value>"
[<api>.<breakpoint alias>]="<expression>"以下是响应布局API的示例用法：
<div fxLayout='column' class="zero"><div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div><div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two"><div fxFlex="22" fxFlex.md="10px" fxHide.lg class="two_one"></div><div fxFlex="205px" fxFlex.md="65" class="two_two"></div><div fxFlex="30px" fxFlex.md="25" fxShow [fxHide.md]="hideBox" class="two_three"></div></div><div fxFlex class="three"></div></div>在上面的标记中，HTML API指令使用静态值和表达式绑定;值表示为原始，百分比或像素值。
注意：numerica值未明确注释为px，vw或vh默认为百分比值。
断点激活后备算法
当激活断点并且主机元素没有为新激活的断点定义响应API时，Flex-Layout响应引擎使用后备扫描算法来确定替换激活值。
该算法搜索：
对于不重叠的断点：搜索从最大到小的断点范围扫描，以找到最接近的匹配激活值。
（xl，lg，md，sm，xs）
对于重叠的断点：从最小到最大断点范围的搜索扫描可以找到最接近的匹配激活值。
（gt-lg，gt-md，gt-sm，gt-xs）;其中gt-xs是最大的范围。
（lt-xl，lt-lg，lt-md，lt-sm）;其中lt-xl是最大的范围
考虑以下响应标记示例：
Example #1
<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>当激活的断点是：
xl，回退到默认fxShow;所以div被显示
lg，那么div被隐藏（因为值===’true’）
md，回到默认fxShow;所以div被显示
sm，回到默认fxShow;所以div被显示
xs，则显示div（因为值===’false’）
Example #2
<div fxFlex="50%" fxFlex.gt-sm="100%"> ... </div>当激活的断点是：
xl，回到’gt-sm’，所以div的大小是100％
lg，回到’gt-sm’，所以div的大小是100％
md，回到’gt-sm’，所以div大小是100％
sm，回退到默认fxFlex =“50％”;所以div的大小是50％
xs，回退到默认fxFlex =“50％”;所以div的大小是50％