CSS - Media Query

Media Query

假設我希望隨著我的螢幕大小改變我的網頁底色，那原本的Media Query應該要這麼寫

HTML PART

<div class="jumbotron jumbotron-fluid text-center" style="min-height: 500px;background-color:grey">
    <h1>6_7_media query: Window width: <span id="winwidth"></span></h1>
</div>

JS: 新增一段JQuery來偵測螢幕寬度

$(window).on('resize', function() {
    var winw = $(window).width();
    console.log(winw);
    $("#winwidth").html(winw);
});

CSS

@media screen and (min-width: 768px) {
    .jumbotron {
        background-color: gray;
        color: white;
    }
}
@media screen and (max-width: 768px) {
    .jumbotron {
        background-color: coral;
        color:blue;
    }
}

@media screen and (max-width: 480px) {
    .jumbotron {
        background-color: dodgerblue;
    }
    h1 {
        color: red;
    }
}

<CodePen>

Detect devices

參考w3schools對media query的說明：設定手機優先、平板、以及桌上型瀏覽器。

[class*="col-"] { // For mobile phones
    width: 100%;
}
@media only screen and (min-width: 600px) { /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
 ...
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) { /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

偵測手機與平板的方向

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}