微信小程序开发笔记（三）flex布局和自适应单位rpx

参考教材：《微信小程序开发入门与实践》 雷磊
前置知识：JavaScript，CSS

什么是flex布局

在上一篇博客里，笔者在hello.wxss 里使用了display: flex; 。什么是flex呢？

flex布局是W3c组织在2009年提出的一个新的布局方案，其宗旨是让页面的布局样式更加简单，并且可以很好地支持响应式布局。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对flex布局的支持并不完善，造成了开发者并不知道与这种布局方式的存在或者使用非常少，我们还是习惯使用传统的position和float属性来布局。但传统的布局方式有它的缺陷 ，比如垂直居中就不是那么容易实现，flex布局可以很好的解决这些问题。现在，小程序能够非常好的支持flex布局，并且这也是官方推荐的布局方式。

响应式布局

上面提到了响应式布局 这一个概念，这个概念是为解决移动互联网浏览而诞生的，主要为了解决同一个WEB页面在不同设备和环境中均能获得一致性用户体验的问题。在设计页面的时候，为了方便，我们通常只在某一种分辨率下预览我们的界面，比如上一篇博客里，笔者就选择了iPhone6作为模拟的机型预览小程序的页面。响应式布局的目标就是在其他移动设备（比如ipad，各种不同分辨率的安卓手机）访问该界面的时候，页面的整体布局不发生改变。我们之前设计