怎样做到制作的网页与设计稿精确到1px的差距？

Question

通过自学html/css制作网页已没有问题，但是有时和设计稿的尺寸差个好几个px,有时用ps量尺寸也会大概量过尺寸，很难精确到1px之内。前端是有一个规矩是精确到1px之内吗？该怎样更进一步？

Answer 1

老实告诉你

这是不可能的，这是只是情怀。如果有人对我说精确到1px之内，我会说没问题，然后心里默默的竖起中指，当Ta没说。

为啥呢？

时间宽松 or 时间烧绳？

恩，如果头头能忍受你调一个页面调一个礼拜的话。如果头头问责，直接把锅甩给设(mei)计(gong)。

没办法啊，Ta没标注也没说明，我只好一点点量了，量了也不是很准balabala

设计师 or 美工？

美工是不是PSD甩给你就over了？图层未命名、各种奇葩特效balabala。然后你就拿着尺子量。

别人家的设计师是做好注释做好style guide，然后和你商量哪些是能实现的，哪些是要降级的，哪是没法做的，哪边是宽度大小无所谓的，哪边是要绝对大小的。

切图 or 前端工程师？

地位问题。如果你只会切图，那么就会被压着打了，

旁边的人都是逗比吗？

大家都是明白人就不会说这句话。

那怎么搞？

首先

先在心里竖个中指，平静一下。

然后

使出拉皮条的本事，尽量一样。

最后

最后如果美工有心思帮你把所有的位置量一遍的话，那就帮Ta改。如果产品经理有心思帮你把所有的位置量一遍的话，那就帮Ta改。

但一般的结果是，他们懒得管。

Answer 2

http://alloyteam.github.io/AlloyDesigner/

Answer 3

首先确认设计稿的缩放比例，比如我们UI设计出来的是2X的，我就需要按照1X的大小来做，然后计算好border，padding，margin和容器的长和宽，基本不会有差错的。

Answer 4

首先确定是pc方案还是移动端的设计方案，pc端拿到设计搞后，100%大小下用标尺量宽度高度，行高，间距等；然后根据设计稿上的测量或者是设计师标注的高度、宽度、边距、边框宽度等等，用css样式实现。控制距离特别是涉及到盒子模型的模块的时候，一定要精确计算。这样会99%的还原设计稿的。

Answer 5

经验之谈是：
1. 本着职业精神会追求尽量与PSD上面的一致，刚开始写的时候确实做到了
2. 如果页面真的很复杂，很多元素需要确定位置什么的，写到后面真心没心情做到完全一致
3. 很多时候都需要自己切图，要是切图不够火候，切偏了一点点，也就将就着用，反正设计师去一个个测量页面的可能性为0.
4. CSS真心是个体力活，逻辑性不强，我是挺讨厌写CSS的。

Answer 6

如果要兼容IE6浏览器，那么精确到1px的确有点难度，回答问题个人觉得还要对得起提问者，我下面阐述的是我多年工作的经验，仅为参考：
起先在日资公司，要求的的确要与设计稿一样，差半px都不可以，如果做不到，提出未能实现的原因，之后开会讨论解决。起前，我觉得日本公司变态，但是，现在想来，那一年是我进步最大的一年。
后来是创业公司，只要求快速产生原型，所以，对于细节并不追究，于是，开始混的日子开始了，发现自己退步了，虽然比过去充实，却在流失知识积累度。
总结：对于设计较为单一和简单的设计稿，是完全可以做到不差1px的，类似的就是政府网站和大众化的企业网站，上面没有多少复杂的东西。对于流布局或者自适应布局，我想，设计稿只是一个方向，它并不能代表结果。

Answer 7

看时间决定细致程度，首先得保证按时上线啊！