html5 - 前端如何百分百还原美工图?

Question

我是一个入门的前端，最近遇到个困惑。就是做出来的也页面老是被批跟美工图有差距，为什么我照着美工图量的，做出不来和美工图一样的感觉呢？ps我也会，感觉在ps随便改很舒服，为什么html代码就这么难调呢？按美工图尺寸来，看着就是不对。看着对了，尺寸又变了。这是为什么?_?为什么永远量不准的感觉?

Answer 1

前端 为什么要百分之百还原美工图？
世界上所有产品都是妥协的结果~
美工要是懂网页设计还行~不懂真能玩死你~

用成熟的框架~比如Bootsrap
按照你选择框架组织内容的方式来设计~
这样实现最快

Answer 2

不知道你是怎么量的，我简单说下我的思路吧。

首先美工图如果是psd，那么想避免误差拿到尺寸最好就是用ps（除非有标注……）。ps建议装最新的cc2015，对前端切图相当友好~

装好以后打开设计稿做预处理：把各个需要独立切开的组件扔进一个组里（便于导出），然后裁切一下页面边缘（避免有超出设计页面的东西导致测量误差，这个我一般习惯用工具栏里的裁切工具，选中后有个设置比例的下拉列表，选择宽高分辨率，然后直接把设计稿默认宽高填上、分辨率写72就ok了。不管裁切范围怎样，系统都会帮你把裁切区域里边的东西自动转好），然后就可以开工了。

在每一个图层/分组（就是要独立导出的部分）上点右键，选择那个“导出为...”然后选择导出格式（当然也可以在首选项里设置下快速导出的格式，之后直接用“导出为xxx”就行了），选完后直接导出，这时候可能会卡一下，是ps自动在压缩图片。ok之后把原图拖进设计稿和原始位置重叠住，选择拖进来那个层，按住ctrl，尺寸就出来了！如果不是想要的还可以动动鼠标，ps会切换显示各种距离尺寸……后边就不用说了吧？自己写定位就好。

最后说一句个人不推荐直接复制css，出来的代码乱七八糟一般没法直接用，还不如这么手工量一下记下来就好。另外导出的东西务必拖进来再量，因为我发现用工具栏上的选择工具的定界框和导出的素材边缘部分并不一定是一样的，所以保险起见还是要拖进来量一下避免有误差……

手机打的，不得不说sf的手机端体验真的好渣啊……我在网页端又重排了下格式，看起来应该不会太累了~

Answer 3

别着急，做到高保真还原是可以的，但也不得不说有些所谓UI尺寸可以搞成14.1px 16.3px 这就没必要了，甚至UI图本身都是有各种不对齐，PS分组各种乱，然后你就是各种纠结是正常的，很多UI连基本的UI素养都没有，还不如一个平面美工，

如果上述状况都不存在可以做好以下工作:
PC端:样式可以先reset.css,然后效果图字体多少尺寸就是多少，图片或边框要注意哪些是不是要做成响应式的

移动端: 同上，字体单位建议用rem，rem是相对于根元素html做字体设置，不容易受继承干扰

总结:不要认为UI图是一定对的，如果一旦确定是合理的就按上述步骤来没问题的

Answer 4

psd不是一般有大小吗？在移动端一般是做了适配的，psd一般给的是640px,最烦的是背景有各种稀稀拉拉的小点点，看到斗恶心

Answer 5

有问题提前沟通，沟通好了，就朝着百分百还原去做。做的过程中遇到问题，及时和设计沟通。至于如何还原，我想在PC端主要视觉差距是IE浏览器兼容性惹的祸，如果你在chrome下斗做不到还原设计稿，建议去温习基础。移动端如果要还原，就要考虑到设计稿是参照多大的尺寸来设计的，字体，间距。总之，都有成熟的解决办法。楼上几个答案，有说不用百分百还原的，那米再前端不会有大的前途，又说用绝对定位的，太片面，不可能满屏绝对定位，不要误人子弟。

Answer 6

如果允许页面出现滚动条，实现还是有可能的，宽高按设计稿的比例计算出来，

如果，既要与设计稿一致，又要整屏显示，那就是不可能的，除非做设计的，也根据不同的设备设计出不同大小的设计稿来，

说多了都是泪，如果你的上司是做设计的，拿着一张设计稿要前端出一模一样的页面，还要整屏显示，因为设计稿就是没有滚动条的，这时你就直接拿键盘鼠标砸到他脸上

Answer 7

兼容IE8-不？如果不要求6和7的兼容性 有可能做出来

Answer 8

个人感觉是没必要100%复刻UI出的设计图，特别是尺寸方面，只要充分理解设计意图的情况下，做到视觉上的还原即可。

Answer 9

啊哈哈哈~以前我遇到过这么样的美工,牛气的很;就是不让一像素的改图;好吧,当时我是这么做的;

整图抠掉文字当做body的背景;所有节点position:relative定位;

之后...项目过了,然后2个月之后就又改版了;

PS:这厮居然要求字体是13PX;

Answer 10

ps可以生成些 css 。有点用