Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
339 views
in Technique[技术] by (71.8m points)

前端工作一般是怎么验收工作结果的?前端工作真的可以做到精确到1px吗?

我在尝试复制页面的时候,一个a元素,我就照着原页面的css computed的属性写的,发现怎么也不能够做到重合,后来我把整个页面拿来,一个div一个div的删除,发现字的的颜色会被它周围的内容影响到,也就是说,就当前能够做到1px,如果内容变了,也不可能保持一样,这个有办法能解决吗?

p.s.复制的是zhihu的header部分,使用的是chrome来显示。


update:
这是今天在知乎上截取的图片:
放大的今天在知乎上截取的图片
这是复制后的删去部分html页面内容的图片,删去script元素,首页这个a元素的css部分没有变化:
复制后删除部分内容页面上截取到的文件

可以看到左边一行象素,在“首”字第一个横线一个是有浅黄色,一个是白色。知乎的页面是今天截的;复制部分是复制几天前的知乎页面,然后我把script元素删除了,保留了最主要的一个css,其他的应该对这个文字元素没有影响。

这是今天我弄的,感觉zhihu自己首页不同时间的相同的字也会产生变化,今天这个“首页”文字感觉和前几天的显示也不同。这个放大了,肉眼都可以看出不同,如果用image diff网站工具来做,颜色上的细微差别会更多。

如果要再严格,我会再做几遍,不改动css,仅删除script和部分div,再将当天的zhihu首页和我删除了部分内容的reduce版本进行比较。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

把矢量图形光栅化的时候,斜线只能用方块来显示,曲线只能折线来表示,虽然尺寸在像素级别,但人眼还是能感觉到这些线条的边缘的不平滑,也就是锯齿,于是乎抗锯齿技术应运而生,简而言之就是在处理锯齿边缘的时候采用一些过渡的色块来填充。
抗锯齿算法多种多样,效果各有千秋,并且同一种算法在不同的显示器上、不同的显示器设置下,所表现的效果都不一样,所以这种细节不仅仅是前端无能为力,哪怕谷歌、微软的专家来也没有办法,前端能干预的只有开启和关闭这个效果(老旧浏览器上无法干预)。
所以验收的时候,这种差异就不必吹毛求疵了。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...