CSS3利用Media Queries在不同的裝置上呈現不同的效果

CSS3可以利用@Media的語法，讓不同尺寸的裝置，可以有不同的效果。
自適應或響應式（RWD）的網頁，通常都需要判斷螢幕的大小來調整內容大小。

語法：
@media not|only MEDIATYPE and ( MEDIA_FEATURE ) {
    CSS-Code;
}

例如：
@media screen and (min-width: 320px) {
    body {
        background-color: green;
    }
}

@media screen and (min-width: 420px) {
    body {
        background-color: blue;
    }
}

上述的語法是指如果裝置是screen，寬度在320px以上時，背景為綠色。
而當screen的寬度在420px以上時，背景為藍色。
在320px以下則因為沒有設定，所以背景顏色預設為無。

Media Types：
all        全部
screen    視窗螢幕
print    印表機


常見的條件（Media Features）有下列：
device-height 裝置的高度
device-width 裝置的寬度
width        視窗的寬度
height        視窗的高度
max-device-height 裝置最大的高度
max-device-width 裝置最大的寬度
min-device-width 裝置最小的寬度
min-device-height 裝置最小的高度
max-height 視窗最大的高度
max-width 視窗最大的寬度
min-height 視窗最小的高度
min-width 視窗最小的寬度
orientation 裝置方向，可設定 portrait(直向) or landscape(橫向)


參考資料：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp