“开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天,点击查看活动详情”
小程序使用图片在实例中不清晰
当出现这样的情况时,需要找到相应的代码,和对应的样式进行调整 首先可以参考imag的属性 如下面表格 可进行修改
mode值 | 说明 |
---|---|
scaleToFill | (默认值)缩放形式,不保持纵横比缩放图片 ,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的短边能完全显示出来。也就是说,可以完整的将图片显示出来 |
aspectFill | 缩放模式,。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。 |
hightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变。 |
首先要理解pt和px的区别。pt是逻辑分辨率,只和屏幕物理尺寸相关。如iPhone 3GS和iPhone4/4s 都是3.5寸,所以分辨率都为320X480。 |
px是物理分辨率,和屏幕尺寸无关。点无大小可言。
pt和px可以理解为一个pt内能包含多少个px。iPhone 3GS和iPhone4/4s相比,逻辑分辨率相同,物理分辨率后者是前者的两倍(Reader为@2x),图像显示就更加细腻。
但是 iPhone6/6s Plus的图像并没有更清晰,这是因为2倍的像素个数已经到达人眼分辨的极限,再增加物理像素点并没有什么意义。
ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度
由于微信小程序给出的分辨率375是逻辑分辨率,而设计图的750是按照物理分辨率。
一个pt可以有1个px构成,也可以有2个,还可以有3个甚至更多。
iPhone6下1个pt由2个px构成。
如何做不同分辨率设备的自适应?
以iPhone6的物理像素750X1334位视觉稿进行设计,而在小程序中使用rpx为单位
iPhone6下 1px = 1rpx = 0.5pt
使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会转换。
但rpx不是所有的场合都适合。
如果上述不能解决问题还可以尝试是不是因为图片的大小解决的问题。本人尝试时用ui设计师给的二倍图解决问题的
``
如有不对的地方还望大佬指点迷津 🙏🙏🙏🙏