weex 或 nvue 中如何将不同分辨率设计稿的 px 或者 dp 标注单位适配为宽为 750px 的标注
weex 项目中,将一个元素宽设为 750px,就代表宽占满屏幕宽度,不管是用什么分辨率的屏幕,weex 会根据基于 750 像素宽自动调整尺寸适应不同分辨率屏幕,根据这个可以得出不同分辨率设计稿转换成 weex 项目中的实际尺寸就可以这样计算:实际编写尺寸(px)= 设计稿标注尺寸(px)*( 750 / 设计稿宽 )假设设计稿是 1080*1920,标注一张图片宽 160px *100...
·
weex 项目中,将一个元素宽设为 750px,就代表宽占满屏幕宽度,不管是用什么分辨率的屏幕,weex 会根据基于 750 像素宽自动调整尺寸适应不同分辨率屏幕,根据这个可以得出不同分辨率设计稿转换成 weex 项目中的实际尺寸就可以这样计算:
- 实际编写尺寸(px)= 设计稿标注尺寸(px)*( 750 / 设计稿宽 )
假设设计稿是 1080*1920,标注一张图片宽 160px *100px 的图片,还原到开发中就是:
- 实际宽 = 160px * ( 750 / 1080 ) = 111px
- 实际高 = 100px * ( 750 / 1080 ) = 69px
如果设计稿中是其他标注单位例如 dp 或 sp,一般 dp = sp,那么将这些标注单位先转化为 px,再进行以上转换,相互转化如下:
- px = ( dpi / 160 ) * dp
知道了什么设备,这个设备的dpi也就知道了,设计师常常拿 iphone6(s) 或者是 iphone6(s) plus 作为参考机型,一个 4.7 寸一个 5.5 寸。比如是 4.7 英寸的 iphone6,它的分辨率是1334x750( dpi 是 326 ),5.5 英寸的iphone6 plus,它的分辨率是1920x1080( dpi 是 480 )
更多推荐
已为社区贡献10条内容
所有评论(0)