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 )

参考博客

Logo

前往低代码交流专区

更多推荐