我们在编写CSS的时候,如果单位使用px,就会导致大小固定,但是如果我们想要根据不同的设备改变大小就要使用rpx作为单位。
rpx是以宽度为750的设计图得出的数据,以即时设计的设计稿为例:
该设计稿的宽度是375px
选中这个页面,点击头顶上的等比例缩放:
将右侧宽度改为750,下面选中为从中间缩放
设计稿就成功变为宽度为750px 我们只需要根据在宽度为750px的设计稿下的尺寸设计rpx就行。如:
我选中的字体大小为48px。
那么我在编写的时候字体大小就是48rpx。
这是在宽度为390的设备上呈现的效果
这是在宽度为768的设备上呈现的效果。
成功实现了按比例进行缩放。