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

什么是flex布局

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

响应式布局

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

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

下面四张图中,红色的箭头代表的是主轴方向,容器内的元素在主轴方向上按顺序排列。
微信小程序开发笔记(三)flex布局和自适应单位rpx_第4张图片
微信小程序开发笔记(三)flex布局和自适应单位rpx_第5张图片
微信小程序开发笔记(三)flex布局和自适应单位rpx_第6张图片
微信小程序开发笔记(三)flex布局和自适应单位rpx_第7张图片
另外,我们还用到了一个align-items:center属性,这个是设置容器元素在交叉轴上的位置,center代表在交叉轴上居中,当然还可以设置其他的值,不过这是css的知识了,读者自行尝试,在这里就不赘述了。
最后,列出在wxml中的其他容器,如下:

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

自适应单位rpx

大家应该注意到了,在hello.wxss样式表里,绝大多数长度单位都设置的是rpx这个全新的单位。比如设置图片大小的时候。
微信小程序开发笔记(三)flex布局和自适应单位rpx_第8张图片

要透彻的了解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作为单位的时候,不会由于页面的变大,该改变大小。
微信小程序开发笔记(三)flex布局和自适应单位rpx_第9张图片
微信小程序开发笔记(三)flex布局和自适应单位rpx_第10张图片
注意:只有在iPhone6尺寸下,1物理像素=1rpx=1px才成立,官方推荐使用iPhone6的尺寸标准来设计界面。

rpx和px 之间的选择

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

你可能感兴趣的:(微信小程序开发笔记(三)flex布局和自适应单位rpx)