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

什么是flex布局

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

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

响应式布局

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

flex布局的简单使用

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

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


• 1
• 2
• 3
• 4

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




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

自适应单位rpx

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

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


注意&＃xff1a;只有在iPhone6尺寸下&＃xff0c;1物理像素&＃61;1rpx&＃61;1px才成立,官方推荐使用iPhone6的尺寸标准来设计界面。

rpx和px 之间的选择