1、页面设计师拿着自己满意的设计稿给前端重构工程师，得到的回答是哎呀，这个没法做，怎么能设计成这样。
2、页面设计师想知道前端重构工程师是怎么工作的，网页切图到底是什么意思？
这篇文章主要是回答这两个问题。（以下设计师指页面设计师，前端指前端重构工程师。）
首先得吹一次牛，无论设计稿是什么样前端都能做出来。前端抱怨的根源是工作量，没有给他安排足够的时间。通常前端比设计师多考虑两点：一是可复用性，一是动态性。
可复用性，设计师也考虑可复用性，但前端对复用的要求更高。写代码的都希望”写的少，做的多”，”修改一处，全局生效”。在ps里复用的概念指的是复制出来一个图层，挪到别处去用，之后这两个图层毫无关系，为了美观复制出来的图层可能根据周围元素的情况稍微改动一下，比如颜色稍稍变淡变深直角改为圆角长宽改变背景加了花纹。前端眼中的复用更局限，不是克隆出来的图层副本，更类似镜子，新加一面镜子照出景象，如果这个景象有变化，那所有镜子中的景象都有变化，如果保持其他镜子中的景象不变，需要单独写代码。代码的复用被打破。
动态性，设计稿就像一张照片映出的是网页最美的瞬间，可前端眼中的网页是动态的，他能根据数据的不同看到网页种种不美的瞬间。设计师为了页面美观可以把模拟数据掐头去尾，但前端展现的时候，必须保证各种数据都不会破坏布局，布局得适应各种数据，文字的折行、省略号，中英文、数字。动态性还表现在用户交互行为上，比如用户点了一个按钮，页面产生了相应变化。设计师眼中是两张类似但独立的设计稿，变化后为了页面美观，有可能稍微改变一下元素大小布局位置，虽然只有几个像素的变化，甚至肉眼看不出来，但前端知道如果两张设计稿叠加起来看是有差别的，前端实现的时候要把这差别计算进去。有时候实现这种差别付出的工作量远大于你的想象，甚至前端要为此调整整个页面布局方式。
还有一点是前端必须考虑的，那就是浏览器的兼容性。设计稿就是张图，在所有看图软件中都显示一致。但浏览器不是这样的，浏览器分为IE，火狐，谷歌等等，IE又有6、7、8、9之分。即使完全一样的代码在不同的浏览器显示的可能完全不一样，需要前端利用某种技术去实现兼容。这对设计师可能非常难理解，但事实如此。还有一点请设计师特别注意，你用的设计软件通常都是最新版能设计出特别美观的图，但IE67是10年前的浏览器，让黑白电视放高清电影，这太吃力了，但偏偏它在中国的市场占有率还很高。（有部IE6 获得终身成就奖应该退役的视频链接贴在文章后面。）圆角、阴影、艺术字体在现在的网页设计中很常见，火狐谷歌等浏览器已经可以使用CSS3技术轻松实现，但IE8以下的浏览器不支持CSS3所以只能做成死图片贴到网页上。死图片改起来必然没有代码容易控制。
说说前端技术。前端网页布局大概可分为两种方式，一是栅格化布局，一是响应式布局。
栅格化布局，算是一种经典布局方式，顾名思义网页被栅格化了，网页中的各个元素都有指定的大小和位置。比如下面这张图：
套用到实际的网页效果：
细节展示：
响应式布局，是最近流行的一种布局方式，他优于栅格布局的地方是能够解决多设备间不同分辨率的适配。 只用一套代码可以就可使同一个页面根据浏览终端的不同（PC，平板，手机）显示出不同的布局。比如 http://www.microsoft.com/，改变浏览器大小试试看。
————————————————-
《IE6获得终身成就奖》 http://v.youku.com/v_show/id_XMjc4MzYxMTY0.html
《网页的栅格系统设计》http://ued.taobao.com/blog/2008/09/grid_systems/
设计团队推荐：
《淘宝UED》 http://ued.taobao.com/blog/
《微博UDC》 http://udc.weibo.com/
《腾讯TGideas》 http://tgideas.qq.com/
《网易用户体验设计中心》 http://uedc.163.com/
《腾讯CDC》 http://cdc.tencent.com/
《搜狐媒体设计中心》http://mdc.sohu.com/
《19楼UED》 http://blog.19ued.com/
《迅雷CUED》 http://cued.xunlei.com/
《全球设计精享站》http://designlol.net/
《飞鱼的声纳》 http://startwmlife.com/
