响应式和自适应式网页设计
待完善…
自适应与响应式都是什么，有什么区别？
A：很多人会对响应式布局和自适应式布局产生混淆，确实他们的原理是非常相似的，都是检测设备，根据不同的设备采用不同的css。
至于他们的区别，有个很简单的方法：同一个页面在不同尺寸的屏幕上访问时，看网址是否一样，只有一个网址为响应式，有多个不同的网址为自适应。另外的区分点是：是否需要一对一的设计界面，是则为自适应。
做响应式页面的条件是什么？
A：响应式可以响应的前提有两点：
页面布局具有规律性，必须建立灵活的网格基础，元素宽高可用百分比代替固定数值；
网页图片必须是可伸缩的(页面中图片不固定宽/高)。
这两点也是栅格系统本身的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较高效快捷，所以响应式与栅格化天生一对好搭档。
网格是创建一个设计精良网站的关键。在《秩序之美-网页中的网格设计》一书中，他解释成功设计的目的是“在混沌中创造秩序”。现在比较流行的8点栅格，就是结合基准网格（8pt）和纵向栅格进行设计。
那么使用8点栅格进行设计的价值是什么呢？
对于设计师：提升效率、减少决策、同时让元素之间保持一种协调的节奏。
对于团队：设计师和前端工程师之间更容易达成默契，前端可以较轻松地用肉眼丈量8的倍数，而不是趴在那一个一个数像素。
对于用户：这让他们信赖的品牌得以保持高质量的一致性体验。并且在自己的设备上也不会出现模糊的半像素偏移。
常见的动态布局方式有哪些？
A：包括固定布局、流体布局、混合布局、响应式布局。
何谓媒体查询？何谓断点？
A：这里有一个新名词，媒体查询（media query），其实是实现断点的一种方法，是前端工程师用简单的方法，来获取不同设备的特征，例如设备的宽度/高度，窗口的宽度/高度，设备的手持方向，分辨率等。
这里又一个名词来了：断点，用浏览器打开一个响应式网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。
媒体查询的其它应用
- 判断设备及编写对应样式
其它问题
如何解决icon放大造成的变形及模糊的问题？
A1：当你的产品做成响应式设计的时候，可能会遇到图标在适应屏幕尺寸的时候拉伸或挤压变形导致模糊，这个时候可以将图标做成字体。
它的优点在于：
- Icon是矢量的，可以自由适应各种尺寸大小，不会模糊；
- 占用空间很小，250个图标的字体只有不到300K；
- Icon Font可控性更高，可以用代码去控制大小、颜色、透明度、特效等；
- 兼容性高，甚至是低版本ie浏览器。
A2. 扩展阅读
要怎么设计，要做几套？
A: 设计几套取决于这个网站你会设置几个断点，而设置多少个断点由网站的内容决定，设计师需要根据网站的实际内容找到合适的断点，设法避免列间空白太宽或太窄的情况。
栅格
element-ui(pc端，兼容至IE10+，常用于CMS)