html还原ui，前端如何百分百还原美⼯图？
不知道你是怎么量的，我简单说下我的思路吧。
⾸先美⼯图如果是psd，那么想避免误差拿到尺⼨最好就是⽤ps(除⾮有标注……)。ps建议装最新的cc2015，对前端切图相当友好~
装好以后打开设计稿做预处理：把各个需要独⽴切开的组件扔进⼀个组⾥(便于导出)，然后裁切⼀下页⾯边缘(避免有超出设计页⾯的东西导致测量误差，这个我⼀般习惯⽤⼯具栏⾥的裁切⼯具，选中后有个设置⽐例的下拉列表，选择宽⾼分辨率，然后直接把设计稿默认宽⾼填上、分辨率写72就ok了。不管裁切范围怎样，系统都会帮你把裁切区域⾥边的东西⾃动转好)，然后就可以开⼯了。
ps切图尺寸变小在每⼀个图层/分组(就是要独⽴导出的部分)上点右键，选择那个“导出为...”然后选择导出格式(当然也可以在⾸选项⾥设置下快速导出的格式，之后直接⽤“导出为xxx”就⾏了)，选完后直接导出，这时候可能会卡⼀下，是ps⾃动在压缩图⽚。ok之后把原图拖进设计稿和原始位置重叠住，选择拖进来那个层，按住ctrl，尺⼨就出来了！如果不是想要的还可以动动⿏标，ps会切换显⽰各种距离尺⼨……后边就不⽤说了吧？⾃⼰写定位就好。
最后说⼀句个⼈不推荐直接复制css，出来的代码乱七⼋糟⼀般没法直接⽤，还不如这么⼿⼯量⼀下记下
来就好。另外导出的东西务必拖进来再量，因为我发现⽤⼯具栏上的选择⼯具的定界框和导出的素材边缘部分并不⼀定是⼀样的，所以保险起见还是要拖进来量⼀下避免有误差……
⼿机打的，不得不说sf的⼿机端体验真的好渣啊……我在⽹页端⼜重排了下格式，看起来应该不会太累了~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。