web app 自适应方案总结 关键字 弹性布局之rem
总结下现在移动端 web app 的自适应布局的方案有 5种，依次成熟。
零. Flexbox
使用css3 flexbox 进行布局，对于富媒体和复杂排版的支持非常强大，未普及兼容性非常差，几乎没有在任何项目中得到应用。
一. 弹性布局
使用 em 或 rem 单位进行相对布局，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。
二. 流式布局（Fluid）
使用 % 百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统（网格系统）
三. 响应式布局（Responsive）
使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
四. 自适应布局（ Adaptive）
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。
这篇文章主要讲的是rem的使用。
css3 中引入了新的长度单位，rem。
rem:rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。
兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
