簡介Responsive Web Design

在過去幾年，桌面端瀏覽器與行動裝置瀏覽器頁面設計，界線基本上是相當分明的。

隨著行動裝置快速普及，並為減輕網頁設計師對於頁面設計的負擔，將傳統桌面端瀏覽器的頁面與行動裝置瀏覽器的頁面整合唯一，Responsive Web Design 自動版型調整的設計理念，也就應運而生。

什麼是 Responsive Web Design？
簡單來說，就是讓一個網頁在 PC、Mobile 上都可以有同樣的瀏覽效果與視覺體驗，而這個就可稱為 Responsive Web Design。

Responsive Web Design 的優缺點

優點：
    一，開發成本比兩套頁面設計低。
    毋庸置疑，因為可以直接用 Media Query 直接寫搭配行動裝置的 CSS ，當然與開發兩套不同網頁樣式的成本低。
    二，不需要重寫 HTML。
    RWD的精神就是不需要再維護另一份 HTML ，直接使用 CSS 屬性來對不同裝置做調整即可。
    三，可以針對許多不同裝置分別調整，利用 CSS3 的 Media Queries 方法就可輕易來實現 。

缺點：
    一，載入速度的問題。
    因為是使用同一份的 HTML & CSS ，所以不管是手機上或者 PC 上，要瀏覽的網頁都是同一份網頁，當然速度也是會一樣。在行動裝置上 Responsive Web Design 雖然看起來較桌面端瀏覽器簡單，但也只是把元素隱藏，事實上載入速度並不會變快。
   二， 在行動裝置上，需再多花心思做頁面的顯示設計。
    一個好的 Mobile User Experience 的話，就必須針對 Mobile 特別調整頁面的顯示。

實作簡介：

RWD最主要是透過HTML及CSS的設定來達到版型自動調整的功能。
一，HTML部份，允許網頁寬度自動調整。
      在網頁代碼的head，加入一行viewport的標籤。
       sample：
      < meta name=" viewport" content=" width=device-width, initial-scale=1" />
      viewport是網頁預設的寬度和高度，上面這行代碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占螢幕面積的100%。
    所有主流瀏覽器都支持這個定義，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），可使用css3-mediaqueries.js來操作。
      可以使用下列語法來載入css3-mediaqueries.js
       < !--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" > </script>
　　< ![endif]-->

二，CSS部份，透過 Media Query 偵測不同解析度大小，給予不同的 CSS 檔案做變化。


// 在 PC 上的顯示
.box {
    width: 800px;
}
// Media顯示
@media(max-width:640px) {
    .box {
        width: 100%;
    }
}
//上面的語法，也就是當寬度 < 767 px 時將載入下面後面的 CSS 。

三，不使用絕對寬度。

四，相對大小的字體
      顯示字體不使用絕對大小（px），而只能使用相對大小（em）。

五，流動布置（fluid grid）
      各個區塊的位置都是浮動的，不是固定不變的。

六，圖片的自動調整（fluid image）

Query 基本使用方法：
如果要非常熟練的運用 media，各種條件跟條件之間的查詢是不可或缺的。
像是 (min-width: 400px) and (max-width: 700px) ，「and」就是 Query 的一種。

Query 的語法只有三大項： not , and , only 。 較常用的是「and」。
而這三種查詢條件可以獨立存在，也可以同時存在，只要用「，」隔開即可。