摘要:RWD - Media Queries
開始學RWD，
我從「自動調適型網頁程式設計」這本書開始學
http://www.books.com.tw/products/0010645148
以前會是我的筆記（之後文章亦是），但我應該是以已懂HTML、CSS角度開始寫筆記的（畢竟我會的東西就不寫筆記了)
有介紹一個網站，
蒐集很多使用Media Queries技術所打造的網站。
http://mediaqueri.es/
Media Queries 是CSS3的新功能，可以依據視窗寬度、圖片解析度、裝置方向等條件為不同裝置提供適當的HTML版面，自動調適型網頁設計就是透過Media Queries為不同裝置調整適合的版面。
@media screen and (min-width:480px) and (max-width:768px) {
<CSS 設定>
}
480 可以再另外複製成768、1024再寫一份不同的設定。
@media 後面的screen 是媒體型態 ， Media Types
書中有列出很多，不過因為是為了RWD，應該是使用screen，我曾經也用過print，當然要列印的時候，才套用某種css
條件也有很多種，min-width，也可以有 max-width
width也可以另外改填
height,
device-width,
device-height,
aspect-ratio,視窗長寬比列
device-aspect,裝置螢幕長寬比例
orientation(可設定portrait(直向)或landscape(橫向))
有些條件的關鍵字如and, 也有其它關鍵字如only,not,
@media only screen
-----------
有些沒看過的CSS語法。
（真是太久沒寫CSS了,Orz...)
筆記一下：
@chareset "utf-8";
/* clearfix */
.cf {zoom:1;}
.cf:before , cf.after { context:"";display:table;}
...略
aside > section { }
這指的是<aside> <section/> </aside>
aside 標籤底下的section