《微信小程序七日谈》系列文章:

  1. 第一天:人生若只如初见
  2. 第二天:你可能要抛弃原来的响应式开发思维

上篇文章第一天:人生若只如初见简单记录了笔者初步上手开发微信小程序遇到的一些问题,其中提到了wxss的部分细节问题。这篇文章以笔者在开发小程序响应式UI当中遇到的一些问题为例,简单记录一下使用wxss为响应式开发带来的一些模式和思维上的改变。

rem的重定义

前端工程师对rem非常熟悉,rem是以html元素的font-size为基准的尺寸计量单位。rem方便了开发者对响应式UI的尺寸进行统筹管理。

wxss中的rem与css中的rem的含义完全不同,下面是微信官方文档中对rem的定义:

rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx

其中的750这个数值是wxss将设备屏幕的宽统一定义为750rpx,对此,下文会讲解。

各位读到这里是否脑海里浮现了一个想法:wxss的rem怎么听起来有点像bootstrap的栅格系统呢?

wxss将屏幕宽分为20rem,bootstrap将设备屏幕宽度分为12列。初看起来确实有点类似。但其实wxss的rem和bootstrap的栅格系统并不相同。虽然wxss和bootstrap都是讲屏幕尺寸分割为单元格,但rem和栅格的定位不同。

bootstrap的开发者使用指定的classname进行元素间的比例分配,这其实接近为css3中的flexbox;而wxss的rem是一个尺寸单位,你可以在合理的场景下将任何以px为单位的属性值替换为rem。

所以,开发小程序UI时,需要抛弃思维中对rem的常规认知。截