一、RWD 三大要素
1. Media Queries（媒體查詢，依照媒介體尺寸不同，調整顯示）
2. Fluid Grids Layout（流動的區塊編排，隨著螢幕大小變動）
3. Fluid╱Flexible Media（流動、彈性網頁內容）
二、CSS Media Queries
1. 不管用啥方式開發，都要先加這一行
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
強迫網頁的內容，以裝置目前的寬度來呈現
2. CSS 語法
@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的設備隱藏樣式用的
