这是一个创建于 1990 天前的主题，其中的信息可能已经有所发展或是发生改变。
急需一名 web 开发大佬解决疑惑。
设计图按照 1920 做的，内容区域 1200.
设计图上传到蓝湖，开发根据蓝湖标注。
但是效果偏差很大，比方说设计图上导航栏高度用的 80px 。前端写出来后比视觉上看起来很高。但也是 80px 。
设计图按照 1920 做的，内容区域 1200.
设计图上传到蓝湖，开发根据蓝湖标注。
但是效果偏差很大，比方说设计图上导航栏高度用的 80px 。前端写出来后比视觉上看起来很高。但也是 80px 。
第 1 条附言 2020-07-17 14:10:15 +08:00
粘贴了代码，各位帮忙看一下
<body>
<!-- 头部 -->
<div class="head">
<!-- 导航栏 -->
<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>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 轮播（ Carousel ）指标 -->
<ol class="carousel-indicators">
<!-- <li v-for="var i=0;i<index.length-1;i++">
<li data-target="#myCarousel" data-slide-to="this.i" v-for="(item,index) in chart" :key="index"></li>
</li> -->
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<!-- 轮播（ Carousel ）项目 -->
<div class="carousel-inner">
<div class="item">
<a class="item-a">
<img src="img/index/1.jpg">
<p class="item-p"></p>
</a>
<body>
<!-- 头部 -->
<div class="head">
<!-- 导航栏 -->
<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>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 轮播（ Carousel ）指标 -->
<ol class="carousel-indicators">
<!-- <li v-for="var i=0;i<index.length-1;i++">
<li data-target="#myCarousel" data-slide-to="this.i" v-for="(item,index) in chart" :key="index"></li>
</li> -->
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<!-- 轮播（ Carousel ）项目 -->
<div class="carousel-inner">
<div class="item">
<a class="item-a">
<img src="img/index/1.jpg">
<p class="item-p"></p>
</a>
 | 1 lxk11153 2020-07-16 16:19:32 +08:00 来? d3gvcXE6IDQ0M+S9lTk3NOWNuDE1OQ== |
 | 2 yaphets666 2020-07-16 16:24:43 +08:00 蓝湖这东西我也感觉到了 标注的根本不准确 不成比例 |
 | 3 Ccxdcyl OP @yaphets666 对照过尺寸，都是看 px 对比，跟设计图还是一致的。这是哪里出了问题呢 |
 | 4 liyang5945 2020-07-16 16:27:57 +08:00 我猜是浏览器开了缩放模式，或系统开了缩放模式 |
 | 5 H15018327040 2020-07-16 16:29:21 +08:00 我觉你可能放大了网页，在网页按 Ctrl+0 恢复默认大小 |
 | 6 vvong 2020-07-16 16:30:08 +08:00 他的效果图是全屏的效果图 你的页面是你浏览器内可视区域的页面 中间隔个浏览器的工具栏、标签栏、windows 底部导航栏 |
 | 7 takemeaway 2020-07-16 16:30:58 +08:00 想跟设计图一模一样？ 那是不可能滴。 首先浏览器色彩显示跟 PS 就不一样，其次浏览器里面间距都是有偏差的，每个浏览器都不一样。 |
 | 8 SakuraKuma 2020-07-16 16:33:14 +08:00 你设计图确定 100%显示了嘛( 看起来高这肯定有毒. |
 | 9 liuhuihao 2020-07-16 16:42:56 +08:00 虽说 真实效果和设计图可能会有一定的偏差，你就你描述的这个导航栏高度来讲是不可能出现肉眼可见的偏差的，一定是哪里有问题导致的 |
 | 10 Hoye 2020-07-16 16:49:29 +08:00 show code and img |
| 11 Ccxdcyl OP 细微的偏差肯定是都能接受，但现在是在网页中的效果，字号也不对、行高也不对 web 前端按照 px 写，浏览器会根据浏览器窗口自适应么？ 其实我是设计，前端解决的方法是：设计图的行高是 80px，然后写出来后很高，然后跟我说要降低一点，我觉得问题不是这么解决的。但又不知道怎么跟他解释。 |
| 12 Ccxdcyl OP |
 | 13 zarte 2020-07-16 17:29:37 +08:00 分辨率不一样 |
| 14 Hoye 2020-07-16 17:48:37 +08:00 @Ccxdcyl 看起来像是 line-height 的问题，不过看不到代码不好说，你不用去要，你打开他的页面，按 f12，左上角有个箭头点一下，然后去页面选中哪个头部， 然后再 f12 弹出的框里面找到 elements->computed 滚动到最下面，有个方框再看看呢 |
 | 15 Kusoku 2020-07-16 17:50:15 +08:00 你应该了解下 css 尺寸单位的区别，px 在不同的分辨率下的视觉效果肯定是有差别的，比如同样是固定 80px，低分辨率下看起来就会很大，而且本身视口高度会被别的部分压缩空间，比如书签栏搜索栏状态栏标签页等等 |
 | 16 miloooz 2020-07-16 17:52:34 +08:00 蓝湖你是有吧右下角调成 100%显示吗？ 日常我们都是 50% 75% 显示，所以看起来比较小，但是把蓝湖右下角的页面比例调成 100%，就很大 |
 | 18 wangritian 2020-07-16 17:53:24 +08:00 发个网址不好吗 |
| 19 Hoye 2020-07-16 17:53:52 +08:00 还有感觉你的图片缩放了，啊哈哈~ |
| 20 Ccxdcyl OP @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> |
 | 21 WellLee 2020-07-16 18:17:25 +08:00  2 想起有一个简单粗暴的方法做到高保真，就是生成一整张的 UI 图，调整一定的透明度后放预览效果最顶层，然后再对照一下有出入的细节 |
 | 22 rabbbit 2020-07-16 18:26:50 +08:00 外包给我, 只要钱给够, 1px 都不差. |
 | 23 zzl22100048 2020-07-16 21:28:54 +08:00 via iPhone 导航栏比你高轮播图比你矮啊 |
 | 25 everyx 2020-07-16 22:11:00 +08:00 应该是高分屏缩放的问题吧 |
 | 26 tikazyq 2020-07-16 22:17:16 +08:00 用尺子量 |
 | 27 lynan 2020-07-16 22:28:02 +08:00 在蓝湖上 比如两行文字 font-size: 14px; line-height: 24px; 蓝湖标注间隔是 8px 的话，那么实际的间隔是 (24 - 14) / 2 + 8 + (24 - 14) / 2 = 18px |
 | 28 whisky221 2020-07-16 22:36:28 +08:00 害，最早也是受蓝图之苦，做出来的东西丑的一比 后来我就纯品感觉做了，只要配色，间距“大致”相同，基本就可以，好看了很多 |
 | 29 UFc8704I4Bv63gy2 2020-07-16 22:38:26 +08:00 via Android @WellLee 这方法值得推广 |
 | 30 ChanKc 2020-07-17 00:19:48 +08:00 via Android #15 应该是对的 ppi 你知道吧，就是 pixels per inch，每英尺多少个像素 如果用 px 的话，在同样大小的屏幕上，288ppi |
| 31 ChanKc 2020-07-17 00:21:06 +08:00 via Android #30 288ppi 的屏幕上的字会比 72ppi 的小很多 px 的好处是文字相对图片的大小固定，因为图片大小都是 px 。除了这方面的考虑，一般都不推荐 px |
 | 32 ccraohng 2020-07-17 08:22:23 +08:00 楼上你让你使用浏览器的控制台左上角的 inspect， 我猜是代码有问题。 |
 | 33 sam014 2020-07-17 10:13:48 +08:00 这个问题我碰到过，你光注意到可视宽度，你注意到可视高度了吗？ 我猜你肯定偏设计一点，需要注意首屏可视高度啊， 我感觉这就是设计缺经验 |
| 34 Ccxdcyl OP |
 | 35 mikoshu 2020-07-17 11:22:43 +08:00 你直接把设计稿放同一个浏览器上看看效果 然后在对比前端的页面 如果确实偏差大 那就是有问题 |
 | 36 ccyu220 2020-07-17 11:50:35 +08:00 1 、只会蓝湖不会 photoshop 2 、不知道盒子模型、视觉差和字体区别的 以上都是菜逼前端，17 年后的普遍，而且还不少。 |
 | 37 justin2018 2020-07-17 11:52:23 +08:00 你倒是放设计图和代码呀~ 都是官网页面 有啥保密的？ |
| 39 Ccxdcyl OP @justin2018 跟保密没关啊，网页都没上线。在开发阶段还没进行完 |
Select Language