flex-layout Responsive API

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

———- #### margin和 Gutters 响应网格集中在一致的margin和 Gutters宽度，而不是列宽度。material设计边距和列遵循8dp平方的基准网格。margin和 Gutters可以是8,16,24或40dp宽。 margin和 Gutters不需要平等。例如，在相同的布局中使用40dp的边距和24dp的沟槽是可以接受的 ———-

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

"false" fxHide.lg="true"> ... 

当激活的断点是：
xl，回退到默认fxShow;所以div被显示
lg，那么div被隐藏（因为值===’true’）
md，回到默认fxShow;所以div被显示
sm，回到默认fxShow;所以div被显示
xs，则显示div（因为值===’false’）

Example #2

"50%" fxFlex.gt-sm="100%"> ... 

当激活的断点是：

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％