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