RWD 主要包含了三種基本技術
1. Media Queries（媒體查詢，依照媒介體尺寸不同，調整顯示）
2. Fluid Grids Layout（流動的區塊編排，隨著螢幕大小變動）
3. Fluid / Flexible Media / Flexible Image（流動、彈性網頁內容）
CSS Media Queries
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
強迫網頁的內容，以裝置目前的寬度來呈現
@media not|only mediatype(媒體類型) and (media feature條件) {
CSS-Code;
}
====== Media Types （媒體類型） ===================
all 全部
print 印表機
braille 點字機
screen 視窗螢幕大小
handheld 行動裝置
tv 電視
projection 投影機
====== Media Features 條件 ===================
device-height 裝置高度
device-width 裝置寬度
width 視窗寬度
height 視窗高度
max-device-height 最大裝置高度
max-device-width 最大裝置寬度
max-height 最大高度
max-width 最大寬度
min-device-width 最小裝置寬度
min-device-height 最小裝置高度
min-height 最小高度
min-width 最小寬度
orientation 裝置方向，可設定 portrait (直向) or landscape (橫向)
====== AND ===============
EX：
@media screen and (max-width: 768px) {
.div1 { font-size: 20px; }
}
螢幕寬度「最大」沒有超過768px，就執行區塊內的 CSS
==>>螢幕寬度「小於等於」768px，就執行區塊內的 CSS
====== OR 的寫法 =============
用AND，中間用逗號區隔，EX：
@media screen and (max-width: 600px), screen and (min-width: 800px) {
div { background: white; }
}
符合螢幕寬度在 600px（含）以下，或 800px（含）以上
====== NOT ===================
not 用來「排除」符合表達式的 Media Features
@media not screen and (max-width: 600px) {
div { background: red; }
}
====== ONLY ===================
@media only screen and (min-width:480px) {
div { background: #F4F4F4; }
}
media queries 是 CSS3 對於 media type 的一個延伸功能
所以不支援 media queries 的瀏覽器還是要能識別 media type
only是用來針對那些不支援 media queries 卻需要讀取 media type的設備隱藏樣式用的
Fluid Grid 液態格子即是將網頁中，原本固定 (Fixed) 規格的格子 (Grid)，改以浮動的方式進行設計。簡單的說，就是將原本以 N px 為單位的設計，改為以 N% 為單位。
以此方式設計，便可讓網頁能依照裝置的螢幕尺寸大小，自動按比例進行調整，就如同液體會依照裝填容器不同而隨其變化形狀。
Flexible Image 易適應的圖像：在圖像 (Image) 的處理上，一般的圖像或照片解析度，在行動裝置的呈現上，容易超出畫面的邊界，無法直接看到完整的圖像。因此，必須透過 CSS 中的max-width 來解決這個問題，也就是讓寬度 (Width) 的部分以比例的方式呈現，而高度 (Height) 則是隨寬度比例變動。
