标签 - 响应式布局
五篇系列目前已经到最后一篇啦！今天我们一起看下响应式UI，相对前面4部分，最后这个部分会略难一些，不过看完今天看这篇文章，应该没想象的那么难了。这篇文章以前有大致写过，今天这版本我已经优化补充了。
如今屏幕复杂，多厂商设备尺寸不统一，自Phone X问世后，国内手机厂商的各种安卓X也出来了。
各种尺寸平板等，设计适配难度上升，公司层，产品侧要求多端体验一致，作为设计师的我们更加有责任去了解如何去做多端统一体验，提高设计效率
为什么要学习响应式布局
首先它能够使界面元素在任何大小屏幕尺寸能够灵活适配，保证功能布局和体验的一致性。
毫无疑问, 响应式布局设计对于现今安卓和IOS端碎片化屏幕是非常重要的，它能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式。
断点其实就是媒体查询值，比如我们平时做的 Phone 和 Pad 的适配，又或者其他终端适配，就是通过设定断点来让程序读取对应的布局（断点设定可以根据屏幕分辨率或者屏幕尺寸）
响应式布局的运用范围
响应式布局不只是在Web端用得比较多，当然他也在其他终端也运用比较多，如电脑，pad ，手机，以及车机系统（某些需要考虑全局一致的项目上）；
为什么响应式布局在今天运用依然是很重要的，因为目前使用的系统被2大厂商分离割据，微软移动领域的占比很少，暂不提，苹果一家自成一派，安卓系统占比市场很大，包括国内外很多厂商的定制化系统+自己出硬件设备，尺寸不一，这就导致如今碎片化屏幕。
我们作为软件服务提供商，当然希望一套设计能在多端使用，节省成本，同时保持一致的体验。因此响应式布局就这样一直很重要。
常用的布局模式
1. 流线布局
流线布局：指在界面中的内容元素控件在屏幕显示区域内进行相对拉伸，以达到布局完整的目的，比如上面Pad应用横竖屏切换
2. 等比缩放
等比缩放：定义是指在界面中元素在相对位置进行等比缩放，从而达到解决横竖屏显示相对较好的UI界面,这种布局不会对界面造成布局重构影响，开发成本低，适配简单，一般使用于音乐、视频、电商、杂志期刊App等领域带有图片宫格布局，界面等比放大后这种大图显示效果比较有视觉冲击力前提是需要足够高清的资源支撑
youtube的截图
3. 拓展布局
拓展布局定义：在屏幕可显示区域类元素增加或者减少，常用于应用商店、音乐、视频、电商等带有宫格布局等场景。
如上面youtube的截图就是布局最好示例