rpx (首字母 r : relative,同样的rem),是相对单位。相对单位的作用主要就是用于等比列缩放
等比列缩放的意思:页面布局不变,屏幕越大,页面中的所有元素(包括字体大小、图片尺寸、容器大小、容器间的间距)等比例的放大,屏幕越小,对应的等比例缩小
一般做适配,说的都是宽度自适应,高度方面可能出现滚动条(等比例缩放,自适应的一种方式),或者纵向内容较少的时候,可以通过flex布局塞入几个自适应的空容器(div),使得页面布局刚好为一屏(flex弹性布局,自适应的另一种方式)。
有人好奇,为啥宽度自适应,高度不能自适应呢?
其实宽高度都有自适应的单位,css3 中的 vw vh,是另外一种形式的相对单位,分别相对的是可视窗口宽度、可视窗口高度。
为啥一般等比例缩放,适配的是宽度而不是高度呢?
首先,不应该同时适配宽度跟高度,因为各型号手机屏幕宽高比例不是固定的,假如有一款手机的宽高比为1:1,为正方形。设计稿的内容是页面要高一些,像 163 首页那种页面高度比宽度长。宽、高度都适应的后果,就是页面里的字就要变形,不再是方块字,而都变成像“-”这种外形的了(宽一些,矮一些),比例失调。即使页面融合在了一屏,里边的字体外形要么偏向“-”,要么偏向“|” 都不利于人们观看。
上边说的变形的问题,再下来就是滚动条的问题,假如不做自适应,可能同时出现横向、纵向滚动条。就像高德地图那样,可以任何方向的滑动屏幕,当然屏幕也会跟着你的手势移动。要想让页面比例不变形,要么出现横向滚动条,要么纵向。相对布局主要的使用场景是在触屏设备(手机),人们的使用习惯是上下滑动屏幕,所以需要宽度自适应(撑满整个屏幕),高度出现滚动条。
展开