小程序02/小程序 响应式单位rpx 、image组件概念说明 和 mode属性介绍

一. 响应式单位rpx

rpx 说明

rpx: 规定不管屏幕为多少px , 100%的屏幕宽度就是750rpx

100% 屏幕的宽度 = 750rpx

rpx响应单位

• rpx是微信小程序独有的，解决屏幕自适应的尺寸单位

• 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx

• 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

rpx 和 px之间的换算

• 在普通网页开发中 ， 最常见的像素单位是px

• 在小程序开发中推荐使用 rpx这种响应式的像素单位进行开发

• 以 iphone6为列 iphone6的屏幕宽度为375rpx 共有750个物理像素 则750rpx = 375px = 750物理像素

二.image组件概念说明 和 mode属性介绍

1.image组件说明:

支持JPG ,PNG,SVG,WEBP,GIF

默认宽高为320px * 240px

通过mode属性控制渲染效果

2.image组件mode属性值 效果 —> mode=“值”

(1) scaleToFill

作用: 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

(2) aspectFit

作用: 保持从横比缩放图片 直到图片某一边碰到边界

(3) aspectFill

作用: 保持综纵横比缩放图片 直到图片完全铺满边界

(4) widthFix

作用: 宽度不变 高度自动变化 保持原图宽高不变