Media Queries 媒體查詢

• 讓網頁可以針對不同的媒體，形式定義不同的樣式。
• 好處：不需要為不同設備寫各自獨立的樣式表

常見的 Media 的種類

• all: 適用所有媒體裝置
• screen: 螢幕
• projection: 投影機
• print: 列印

範例

範例一：多種 Media

• 用逗號隔開
• partrait: 直立式

@media screen and (orientation:portrait), projection and(orientation:portrait){
    #back{
        color:red;
    }
}

範例二

@media all and(max-width:400px){
    #back{
        color:red;
    }
}

範例三

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

範例四

body {
    background-color: lightblue;
}

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

http://www.w3schools.com/css/css3_mediaqueries_ex.asp

• demo