2种设计稿rem和px比例的换算 - pod4g/tool GitHub Wiki
-
以前给的设计图是以iphone4为基准的,所以给的图是
640 x 960
,这个阶段,我是以1rem = 100px
作为基准的。 -
中间有段时间设计图是以iphone6为基准的,所以给的图是
750 x 1334
最近给的设计图是以iphone6s plus为基准的,设计图给的是1242 x 2208
按照给的设计图画页面,其实有2种做法,假设以iphone6s plus为基准:
-
1rem = 100px
,则基准比例为1242 / 100 = 12.42
,如果设计图上有一个元素标注是180px
,那么就可以直接设置为1.8rem
这种计算因为能整除所以比较方便,并且还能容纳较多的分辨率的设备进去(最大的分辨率为1242px
)。 -
选取设计图上的某个元素,比如宽度为
180px
的元素,那么计算在真机上其尺寸应为180 / 3 = 60px
,那么就可以得出基准比例414 / 60 = 6.9
,然后各个屏幕分辨率除以6.9
即可。