flex-layout Responsive API
来源:互联网 发布:数据透视表多条件筛选 编辑:程序博客网 时间:2024/05/21 21:02
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的沟槽是可以接受的———-如果我们将断点别名与静态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%
- flex-layout Responsive API
- responsive layout in css
- flex-layout
- flex-layout
- Which Layout? Static, Liquid, Adaptive, or Responsive
- Material Design 学习笔记 -- Layout --> Responsive UI
- My Layout Flex 4
- Flex layout机制
- android布局控件flex-layout
- angular4 Flex Layout开发实践
- flex api 官方 api
- 分享一个纯CSS3的响应式(responsive layout)幻灯设计
- Android API Guides---Layout Resource
- Android API Guides---Linear Layout
- Android API Guides---Relative Layout
- (总结)flex-layout响应式布局
- flex弹性盒布局(layout)
- Flex 在线API
- hdu6140Hybrid Crystals(水)
- C++函数返回值发生的对象复制
- 第一个.NetCore 2.0程序
- Java微信公众平台开发之将本地开发环境映射到公网访问
- gridControl
- flex-layout Responsive API
- HDU6154-CaoHaha's staff
- sysConfig.bat 闪退问题及此处不应有 \Java\jdk1.7.0_79问题的解决
- 使用python的BeautifulSoup库解析页面应选择适当容错能力的解析器
- openoffice问题:conversion failed: could not save output document; OOo errorCode: 283
- Android 三大图片缓存原理、特性对比
- 1159. 【NOI2002】银河英雄说(并查集)
- 接口自动化之thirdDay JsonGuolvTest 过滤掉某个字段的值 price
- 2017中国大学生程序设计竞赛