前言
像素完美（Pixel Perfection）、分辨率无关（Resolution Independent）和多平台体验一致性是设计师们的追求。 可访问性（Accessability）、加载性能和重构灵活性是前端工程师们关心的主题。
当下互联网设备「风起云涌」，显示分辨率「层出不穷」，为 Web 创建者们带来越来越多的难题。
需要为高PPI（aka Retina）显示设备准备@1.5x、@2x、@3x的图片素材；
需要针对不同显示屏分辨率来调整优化排版；
需要考虑多个分辨率版本的图片的加载性能问题；
设备版本碎片化（Version Segmentation）带来的语义和可访问性的问题；
……
响应式设计
响应式设计（Responsive Design）作为「救世主」的身份，已经在 Web 界布道了好几年，丝毫不亚于当年的「Ajax」先生。其核心就是：针对不同设备和应用场景，作出合理性的适应。狭义地看，就是 Web page 在不同分辨率下借助 media qurey 来调整页面布局和内容显示，三个关键词是：Fluid grids, Flexible images, Media queries.
其中 Flexible images 是最为棘手的地方。因为前面提到，现在的设备多样化，不同分辨率和不同 PPI 给图片自适应带来了空前复杂度。目前还没有一套完美的解决方案来应对，W3C那边还在拟定 Responsive Images 和 Picture Element 的相关标准。但在这之前你需要采取多管齐下的方式，针对媒体元素不同的使用场景，制定不同的自适应策略。目前主要有三种主流方式：
max-width: 100% 来自适应容器同一张图片，在不同容器里，自动适应到容器的大小。存在的问题是，大尺寸图片在小尺寸屏幕下的带宽浪费和加载速度慢。
多版本图片更换
针对写在CSS里的background-image，可以借助 media query 来适应显示 @1x 或 @2x 的版本。
针对 HTML 里的图片可以利用 Piturefill.js 来做自适应。
使用矢量化图形，包括
icon fonts
SVG
这一期我们主要来讲讲 icon fonts 的应用。
什么是 icon fonts?
利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象。
注：上图是 Apple 纪念 Mac 发布30周年网站截图，网页内大量运用了 icon fonts 来塑造不同年代发布的产品，这类 iOS 7 引入的线条风格图标，使用 icon fonts 来表现最合适不过了。