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
害,最早也是受蓝图之苦,做出来的东西丑的一比
后来我就纯品感觉做了,只要配色,间距“大致”相同,基本就可以,好看了很多 |
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 跟保密没关啊,网页都没上线。在开发阶段还没进行完
|