响应式Web设计（资源/心得）

一年前，第一次接触响应式Web设计是经过一本书《响应式Web设计-HTML5和CSS3实践》（英文名为：Responsive Web Design width HTML5 and CSS3）做者：Ben Frain。这是一本很不错的书，简单且容易理解，却包含了大量的资源，书中提到的不少案例网站都值得一看。

虽然，书中对HTML5的讲解只是初略的入门，可是，却会给看的人很大的信心去学好它。

因而，我开始在项目中把 % 疯狂地应用到自适应的网页制做中。而后，因为公司全部制做的网页都须要兼容IE7，甚至更低版本的浏览器，HTML5响应式慢慢淡出了个人世界。由于项目中用的少，而无法全心去研究。

也许是由于接触和实践的并很少，一开始，我天真的觉得响应式就是“媒体查询”精妙应用，甚至不少开源的框架（像Bootstrap）直接就能实现不少酷炫的效果。直至最近，公司新版官网采用全响应式设计，发现有些东西实现起来并无那么简单，作一个首页花了将近两周（虽然中间还有别的工做）。在和同事的交流和讨论中，我开始理解到响应式的真正目的是为了网站在不一样设备中显示出最佳效果。如今项目还在进行中，期待上线后呈献给用户完美的体验。

如下是我在项目开发和那本书中总结出来的一些资源：

一、HTML5解决video自适应问题
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

二、Modernizr按需加载
http://modernizr.com/

（Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.）

三、Selectivizr（修正CSS3在IE6-8）
http://selectivizr.com/

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

四、为CSS3自动添加私有前缀属性（针对IE之外的浏览器 firefox、Chrome..）
http://leaverou.github.io/prefixfree/

例如：

box-shadow:...;
-moz-box-shadow:...;
-webkit-box-shadow:...;
-o-box-shadow:...;

就只须要写 box-shadow:...; 了

五、图片自适应大小
http://adaptive-images.com/

六、网页嵌入特殊字体（icon字体）
https://icomoon.io/#icons-icomoon

七、使媒体查询在IE6-8有效 （放在服务器上才有效果）Respond.js
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
http://alistapart.com/article/responsive-web-design
下载地址：https://github.com/scottjehl/Respond

未完待续.....