Pixel Perfect - 工具

之前使用最多的工具是QQ/TM的截图(快捷键CTRL+ALT+A)和肉眼估算,追求pixel perfect的话还是要专业的工具才好

FastStone Capture

身为一款截图软件却带了一把邪恶的屏幕标尺,不幸落入设计师手中成为测量偶们页面的万恶之源!

Pixel Perfect

一款基于firebug的扩展,官网为http://www.pixelperfectplugin.com,效果不错,不过只支持Firefox

Microsoft Expression Web

通过工具栏的视图-描摹图像菜单来进行设置或调出

之后配合设计视图进行调试。用起来也没那么爽,设计视图的显示效果和浏览器始终会有差异

打造自己的Pixel Perfect

Pixel Perfect扩展和EW的描摹图像功能原理类似,将效果图叠在页面下方并设置一定的透明度之后偶们再用肉眼比对。知道了原理我们自己就可以开始DIY了,代码如下:

<!DOCTYPE html>  
<html>

<head>  
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<title>Pixel Perfect - 99css.com</title>  
<!-- Pixel Perfect -->  
<style>  
img.pixel-perfect{position:absolute;left:0;top:0;-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";#filter:alpha(opacity=50);}  
#pg{position:relative;z-index:1;}
</style>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){
    $('<img class="pixel-perfect" src="设计/填写资料页副本.jpg" />').appendTo('body');
})
</script>  
</head>

<body>

<div id="pg">  
    <div id="hd">head</div>
    <div id="bd">body</div>
    <div id="ft">foot</div>
</div>

</body>

</html>  

一个跨浏览器的Pixel Perfect就这样诞生了,使用时只需调整图片路径、top/left值、透明度即可(有时页面很长,js写在head中方便后期删除,暂时去除只需将整段注释掉;追求性能放在页面底部,不过本地调试就不用这么龟毛了吧)

Next

剩下的就是配合firebug/IE developer toolbar进行微调,体力活开始了…