sketch设计手机端页面，重构注意事项

前言

上周做需求遇到一个用sketch设计手机端的设计稿，遇到了一些问题，所以为自己遇到的问题做个总结。

sketch设计稿调整分辨率

刚开始我拿到的页面上图这样子的，是一个360px的设计稿，当时就懵了，640px以下的设计稿在高分辨率的情况下会模糊。后来我发现这个分辨率是可以调的

在设计稿的右上角有个手机的形状，在这里是可以调整设计稿的分辨率的。

sketch调整分辨率后单位为dp

调整了设计稿分辨率后发现了一个新的问题，就是单位是dp而不是px...，后来百度了一下，发现dp和px是不等的...

后来通过同事的引导，把设计稿百分百缩放，用chrome的检查选中相应的div，看到这个div宽度是1080px的，再在sketch中把分辨率设置为1080dp即可重构。

vw实现缩放的问题

现在适配手机端都是用以下代码实现

html{ 
    font-size: calc( 100vw / 设计稿宽度*100 );
}
复制代码

由于兼容问题，一般是直接用 font-size: 100/设计稿宽度*100 vw 【100/设计稿宽度*100 这个值是我们算出来的结果】，比如640的设计稿，我们就是用font-size:15.625 vw ，但是对于不能整除的设计稿要怎么确定小数点后的位数呢？

通过将分辨率设置为设计稿的宽度，选中html，在Computed里面看font-size的值是不是100px。如果是证明这个小数位是可以的，如果不是就要增加小数位。