記得一開始搜尋RWD相關的資料時，大家的第一步都是說META 標籤的Viewport。

那我也來計錄一下META標籤應該怎樣使用。

 Viewport 

這是用來告訴瀏覽器，使用的裝置有多高、多寬。可以讓使用者再不同裝置下有基準的比例。

 使用方法 

 <meta　name="viewport"　content=" width=device-width, initial-scale=1.0, minimum-scale=0.8, maximum-scale=2.0, user-scalable=no ">

• width: 使用 device-width (裝置寬度) 作為可視區域的寬度。
• initial-scale: 文檔初始的比例，用 1 表示 100% ，範圍從 0.1 ~ 10 可任填。
• minimum-scale: 最小可以縮放到 0.8 比例。
• maximum-scale: 最大可以縮放到 2.0 比例。
• user-scalable: 是否允許使用者進行縮放。no 不允許；yes 允許。

 Wireframe 

有兩個不錯的網站框架規劃工具，可以用來畫出Wireframe

• MockFlow(無中文) - 這一個設計工具，是看到香腸炒魷魚介紹的，他內容相當的詳盡。

• Balsamiq Mockups ( 非free ) - 這一個設計工具，是看到西瓜介紹的，也是知無不言，清楚到還有影片說明。

當然以上的設計方式，適用需要詳細討論的大型專案。小型活動頁基本上，我都是用手畫出大約樣式再進行討論而已。

 Grid 

再了解以上的事情後，接著需要涉獵的就是Grid設計。

Grid就是把頁面分成網格狀，不在設定寬度，均使用格數推算百分比，以此方式置作自適應的頁面。

最著名的應該就是這個960Grid System。

這方式是將一格設定為多少寬度，在每格中還有自己的padding跟margin設計。使用者在依照需求的格數來呈現畫面。

Bootstrap也是利用每個頁面均分成12格，設計的頁面大小的分類方式為：lg->md->sm->xs。

以上圖片由網路上擷取參考。

先前使用過兩個RWD的Framework 包括 Bootstrap 和 Susy ，這兩個作法都與Grid脫離不了關係。

這次紀錄自己所學的RWD資料，將會先以Bootstrap為主。

Susy的部分高雄前端的廖洧杰分享教學已經超級清楚，可以參考他的教學作練習，很快的就會學會。