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

[Ccxdcyl]

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

[lxk11153]

来? d3gvcXE6IDQ0M+S9lTk3NOWNuDE1OQ==

[yaphets666]

蓝湖这东西我也感觉到了 标注的根本不准确 不成比例

[Ccxdcyl]

@yaphets666 对照过尺寸，都是看 px 对比，跟设计图还是一致的。这是哪里出了问题呢

[liyang5945]

我猜是浏览器开了缩放模式，或系统开了缩放模式

[H15018327040]

我觉你可能放大了网页，在网页按 Ctrl+0 恢复默认大小

[vvong]

他的效果图是全屏的效果图 你的页面是你浏览器内可视区域的页面 中间隔个浏览器的工具栏、标签栏、windows 底部导航栏

[takemeaway]

想跟设计图一模一样？ 那是不可能滴。

首先浏览器色彩显示跟 PS 就不一样，其次浏览器里面间距都是有偏差的，每个浏览器都不一样。

[SakuraKuma]

你设计图确定 100%显示了嘛( 看起来高这肯定有毒.

[liuhuihao]

虽说 真实效果和设计图可能会有一定的偏差，你就你描述的这个导航栏高度来讲是不可能出现肉眼可见的偏差的，一定是哪里有问题导致的

[Hoye]

show code and img

[Ccxdcyl]

细微的偏差肯定是都能接受，但现在是在网页中的效果，字号也不对、行高也不对
web 前端按照 px 写，浏览器会根据浏览器窗口自适应么？
其实我是设计，前端解决的方法是：设计图的行高是 80px，然后写出来后很高，然后跟我说要降低一点，我觉得问题不是这么解决的😂。但又不知道怎么跟他解释。

[Ccxdcyl]

@Hoye 代码不太方便要，图片截图看一下，
链接: https://pan.baidu.com/s/13NTujMKHYkY8vZv2Bp0ITg 提取码: c6sv

[zarte]

分辨率不一样

[Hoye]

@Ccxdcyl 看起来像是 line-height 的问题，不过看不到代码不好说，你不用去要，你打开他的页面，按 f12，左上角有个箭头点一下，然后去页面选中哪个头部， 然后再 f12 弹出的框里面找到 elements->computed 滚动到最下面，有个方框再看看呢

[Kusoku]

你应该了解下 css 尺寸单位的区别，px 在不同的分辨率下的视觉效果肯定是有差别的，比如同样是固定 80px，低分辨率下看起来就会很大，而且本身视口高度会被别的部分压缩空间，比如书签栏搜索栏状态栏标签页等等

[miloooz]

蓝湖你是有吧右下角调成 100%显示吗？ 日常我们都是 50% 75% 显示，所以看起来比较小，但是把蓝湖右下角的页面比例调成 100%，就很大

[Ccxdcyl]

@Kusoku 这个问题我考虑过，所以我也有问是不是不用 px，用 rem 之类的。

[wangritian]

发个网址不好吗

[Hoye]

还有感觉你的图片缩放了，啊哈哈~

[Ccxdcyl]

@Hoye 没有找到😂，点完头部出现<nav class="navbar navbar-default navigation1" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="col-xs-7 col-xs-offset-2 navbar-brand logo" href="index.html"><img src="img/logo.png" class="img"></a>
</div>
<div class="collapse navbar-collapse " id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right top-top ">
<li class="navigation-li li"><a href="index.html">首页</a></li>
<li class="navigation-li"><a href="news.html">新闻中心</a></li>
<li class="navigation-li"><a href="about.html">关于我们</a></li>
<li class="navigation-li"><a href="company.html">公司业务</a></li>
<li class="navigation-li"><a href="market.html">市场动态</a></li>
<li class="navigation-li"><a href="policy.html">政策法规</a></li>
</ul></div>
</div>
</nav>