weex 或 nvue 中如何将不同分辨率设计稿的 px 或者 dp 标注单位适配为宽为 750px 的标注

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 )

参考博客