響應式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

未完待續.....