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%