这是一个创建于 1626 天前的主题，其中的信息可能已经有所发展或是发生改变。
急需一名 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