Flutter 图片适配2x,3x,4x

像素(px): 屏幕上的点

dip(dp):Density-independent pixel--->与密度无关的像素

    由于JPG容易失真, 在Android开发中尽量避免使用.jpg图片, 应该使用.png图片, 它采用了从LZ77派生的无损数据压缩算法.

画布的概念就是一个手机屏幕,例如现在的通用设计屏幕是1920*1080,所以设计师只需要找一个这样分辨率的画布进行app设计
图片大小

上面说到了画布的概念,现在来说图片的大小,图片的大小指的就是长*宽,当然这里说的图片大小就是在前面说到的画布上设计出来的app页面中的某个图片的大小,一般单位是按照像素进行计算的,例如48px * 48px,这就是这个图片在1080 * 1920的分辨率手机上的实际图片大小
xxhdpi等分辨率

说到不同hdpi的概念就是不同分辨率的概念,安卓中对应了很多种不同的hdpi分别来适配不同的手机屏幕(五种主流像素密度(MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI)
),按照等级区分主要有以下几种:
header 1     header 2
mdpi     120dpi ~ 160dpi
hdpi     160dpi ~ 240dpi
xhdpi     240dpi ~ 320dpi
xxhdpi     320dpi ~ 480dpi
xxxhdpi     480dpi ~ 640dpi
手机常见尺寸和对应像素密度

16:9的尺寸:

720p :1280x720 标清

1080p :1920x1080 高清
一般分辨率对应DPI:

“720P xhdpi”

"1080P xxhdpi "

那这些不同的分辨率跟前面讲到的图片大小有什么联系呢?

    . 在不同的hdpi下,图片的大小是不一样的
    在设计图标时,对于五种主流像素密度(MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI)
    应按照(2:3:4:6:8)的比例进行缩放,(1x, 1.5x, 2x, 3x, 4x),例如:
    尺寸为48x48dp的图标,表示在MDPI的屏幕上其尺寸应为48x48px
    在HDPI的屏幕上其实际大小是MDPI的1.5倍(72x72px)… 依此类推

设计流程

    先确定一张画布(通用 1920*1080,属于xxhdpi)
    导出的图片标准是按照 2:3:4:6:8的比例导出到MDIP, HDPI, XHDPI, XXHDPI, XXXHDPI对应的文件夹下
    5.例如其中一张图片设计出来的大小是72*72,因为是1080属于2x,所以宽高除以6再乘以2 得到的大小24 * 24就是MDIP下图片的大小,以此类推

最后

总结前面的分析,图片的大小其实与分辨率有这密不可分的关系,一般是按照标准分辨率设计出一个标准大小的图片,然后再按照这个标准属于哪类分辨率进行2:3:4:6:8的等比缩放,设计图片大小的时候(除了icon)没有一个固定的标准,这都是根据页面的样式大小进行设计的!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值