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

什么是flex布局

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

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

响应式布局

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

flex布局的简单使用

display: flex 主要作用在容器上，比如view组件就是一个容器。设置display: flex是使用flex布局的先决条件。
然后我们来了解轴的概念。类似平面直角坐标系中有不同方向的两条轴（X轴和Y轴）一样，使用Flex布局的容器内也有两条隐形的轴，一条称为主轴，另一条称为交叉轴，两条
轴也相互垂直。我们只需要通过flex-direction指定主轴的方向，另一方向的轴自动成为交叉轴。

  flex-direction: column; 主轴垂直，方向自上而下，交叉轴为水平方向
  flex-direction: column-reverse;主轴垂直，方向自下而上，交叉轴为水平方向
  flex-direction: row;主轴水平，方向自左向右，交叉轴为垂直方向
  flex-direction: row-reverse;主轴垂直，方向自右向左，交叉轴为垂直方向

• 1
• 2
• 3
• 4

下面四张图中，红色的箭头代表的是主轴方向，容器内的元素在主轴方向上按顺序排列。




另外，我们还用到了一个align-items:center属性，这个是设置容器元素在交叉轴上的位置，center代表在交叉轴上居中，当然还可以设置其他的值，不过这是css的知识了，读者自行尝试，在这里就不赘述了。
最后，列出在wxml中的其他容器，如下：

组件名	说明
view	视图容器
scroll-view	可滚动视图容器
swiper	滑块视图容器
movable-view/movable-area	可移动的视图容器
cover-view	覆盖在原生组件之上的文本视图
cover-image	覆盖在原生组件之上的图片视图

自适应单位rpx

大家应该注意到了，在hello.wxss样式表里，绝大多数长度单位都设置的是rpx这个全新的单位。比如设置图片大小的时候。

要透彻的了解rpx这个单位，还需要对移动端的分辨率有一定的了解，比如物理分辨率px和逻辑分辨率pt等概念。简单的说，rpx将随着屏幕尺寸的变换而变换，但px不会。这里我们只需要记住如下的结论：
在iPhone6的宽度750个物理像素作为标准来做设计图，1物理像素=1rpx=0.5px，
比如在iPhone6宽度750物理像素下，要显示一张宽和高都是200像素*200像素的图片，就要把图片的高度和宽度都设置为200rpx，或者100px ，这时候在iphone6上的显示的效果都是一样的，但是我们换到其他机型的时候，就会出现差异。因为rpx将随着屏幕尺寸的变换而变换，但px不会改变大小。
下面做个尝试，在iPhone6尺寸下，将图片的单位改为px，图片的大小没有发生改变，然后把模拟器切换都ipad pro ，图片还是一样的大小（但是相对于整个页面来说，变小了），即px作为单位的时候，不会由于页面的变大，该改变大小。


注意：只有在iPhone6尺寸下，1物理像素=1rpx=1px才成立,官方推荐使用iPhone6的尺寸标准来设计界面。

rpx和px 之间的选择

在进行移动开发的时候，我们经常要考虑不同分辨率下页面的显示情况。比如对于margin 属性或者image组件，很多时候，需要他们随着设备的尺寸不同动态的变化，以保持页面元素之间的分布可以保持一定的比例关系。
但有时候，比如boder属性（设置边框的样式）,我们不需要它动态变化。如果随着页面的放大，边框的线条变得越来越宽，页面就不好看了。
所以选择使用rpx还是px需要看实际情况，此外也需要读者自己去多多尝试