怎么解决 web 前端开发与设计图的偏差？

[Ccxdcyl]

急需一名 web 开发大佬解决疑惑。
设计图按照 1920 做的，内容区域 1200.
设计图上传到蓝湖，开发根据蓝湖标注。
但是效果偏差很大，比方说设计图上导航栏高度用的 80px 。前端写出来后比视觉上看起来很高。但也是 80px 。

[WellLee]

想起有一个简单粗暴的方法做到高保真，就是生成一整张的 UI 图，调整一定的透明度后放预览效果最顶层，然后再对照一下有出入的细节

[rabbbit]

外包给我, 只要钱给够, 1px 都不差.

[zzl22100048]

导航栏比你高轮播图比你矮啊

[TabGre]

@WellLee 我刚开始还原设计稿的时候，就是这么搞的

截图写好的页面，在 ps 中将一张图设置一定的透明度，然后对比。

[everyx]

应该是高分屏缩放的问题吧

[tikazyq]

用尺子量

[lynan]

在蓝湖上 比如两行文字 font-size: 14px; line-height: 24px; 蓝湖标注间隔是 8px 的话，那么实际的间隔是 (24 - 14) / 2 + 8 + (24 - 14) / 2 = 18px

[whisky221]

害，最早也是受蓝图之苦，做出来的东西丑的一比
后来我就纯品感觉做了，只要配色，间距“大致”相同，基本就可以，好看了很多

[weiqk]

@WellLee 这方法值得推广

[ChanKc]

#15 应该是对的
ppi 你知道吧，就是 pixels per inch，每英尺多少个像素
如果用 px 的话，在同样大小的屏幕上，288ppi

[ChanKc]

#30 288ppi 的屏幕上的字会比 72ppi 的小很多
px 的好处是文字相对图片的大小固定，因为图片大小都是 px 。除了这方面的考虑，一般都不推荐 px

[ccraohng]

楼上你让你使用浏览器的控制台左上角的 inspect， 我猜是代码有问题。

[sam014]

这个问题我碰到过，你光注意到可视宽度，你注意到可视高度了吗？

我猜你肯定偏设计一点，需要注意首屏可视高度啊，

我感觉这就是设计缺经验

[Ccxdcyl]

@ccraohng
@sam014
你们俩的判断貌似有冲突。
这个问题还没确定是什么具体原因，还有一个情况是，这个网站还要视频移动端。会有影响么？

[mikoshu]

你直接把设计稿放同一个浏览器上看看效果 然后在对比前端的页面 如果确实偏差大 那就是有问题

[ccyu220]

1 、只会蓝湖不会 photoshop
2 、不知道盒子模型、视觉差和字体区别的
以上都是菜逼前端，17 年后的普遍，而且还不少。

[justin2018]

你倒是放设计图和代码呀~

都是官网页面 有啥保密的？

[ccraohng]

@Ccxdcyl 楼上不指 n - 1 :)
很简单, show code

[Ccxdcyl]

@justin2018 跟保密没关啊，网页都没上线。在开发阶段还没进行完