设计师需要了解的前端知识

一个好的服装设计师需要了解他使用的布料、人体结构、布料剪裁等技术。而一个优秀的网页设计师，同样要了解设计出来的网页效果，浏览器是否可以全部实现、部分（降级）实现、无法实现等。

网页永远都是在浏览器里显示，只是载体（设备）不同，有时是电脑，有时是手机、平板等。浏览器有很多种，电脑、手机、平板也有很多种，各自都有细微不同，所以才造成兼容性问题，也是前端最头痛的问题。如果设计师能了解大部份差异，那么在设计界面的初期，就能预测到各个浏览器和设备的显示效果，和前端人员的配合也会更加愉快。

浏览器分为现代浏览器（Google Chrome、火狐Firefox、Safari、IE10+、360极速等），IE浏览器（IE7-IE9）和IE6浏览器。其中IE6是最多问题的，因为他的生产日期是2001年，而现代浏览器不断的更新，是支持度最高的。手机、平板里面都是现代浏览器，所以兼容性稍微比电脑乐观一点，但也有他自己的问题。

###一些常见的兼容性

	高级浏览器	IE浏览器	IE6
悬浮效果	√	√	× 但可以用js实现
半透明图片	√	√	×
半透明遮罩	√	√	√
圆角/阴影/渐变	√	×	×
直线位移	CSS3/js	CSS3/js	js
不规则位移	CSS3	×	×
旋转	CSS3	×	×

###一些经验：

• 图片色彩过多，例如banner、产品图，一般用jpg，半透明用png24（IE6不支持），全透明用png8，动态图片用gif。
• 如果需要背景大图，图片尽量做有规律，或者旁边背景色为纯色，这样前端可以重复循环利用，图片体积相对就小。
• 如果设计了一些圆角、阴影、渐变，建议采用优雅降级处理。高级浏览器效果都正常显示，IE浏览器部分显示，IE6不显示。但所有浏览器需要保证正常网页展示。